Gantt Interactivity


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.


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.


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.


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




To change the selected item color use the elements() states:


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) {


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 use the edit() method:

// make a Gantt chart editable


Learn more in Editing mode in AnyGantt article.