Gantt Interactivity

Overview

AnyGantt offers you a wide variety of options that allow to make your gantt charts really interactive.

You can control appearance of elements depending on user action - use states styles for that. You can define a set of actions that should be performed when user clicks some element on the chart. Action can open the certain web page, call an external function (JavaScript, for example). AnyGantt dispatches events that can be handled.

Tooltips

When you need a tooltip that will show more or less than it does by default, you always can use the format method to change the information shown.

JsFiddle Playground

As you can see, tooltips of this gantt are the same in both datagrid and timeline parts. We have only changed the timeline part tooltip using simple format() method:

chart.getTimeline().tooltip().format(function (e) {
  var item = e['item'];
  return item.get('name') + '<br>' + 'Start time: ' + anychart.utils.defaultDateFormatter(item.meta('minPeriodDate')) + '<br>'
      + 'End time: ' + anychart.utils.defaultDateFormatter(item.meta('maxPeriodDate'));
});

You can find more about text formatters in Text Formatters.

Hover

You can change hover colors using getTimeline().rowHoverFill() and rowHoverFill() accordingly:

chart.dataGrid().rowHoverFill('#DEFFE3')
chart.getTimeline().rowHoverFill('#DEFFE3')

JsFiddle Playground

Select

To change the selected item color use the getTimeline().selectedElementFill() method and for the selected row there is the rowSelectedFill() method.

JsFiddle Playground

Handling chart events

You can listen to some events happening on a chart to collect some data and make your Gantt react somehow. For example, to delete the selected row:

chart.listen('rowSelect', function(e) {
    e.item.remove();
});

JsFiddle Playground

You may use listeners for adjusting the gantt view or editing the data as well. There's a lot of information about Event Listeners you can find in Event Listeners article.

Editing mode

You can edit Gantt Charts in the "live" mode. To enable live editing do the following:

// to make a Gantt chart editable
chart.editing(true);

JsFiddle Playground

Learn more in Editing mode in AnyGantt article.