chart.events

Fires when the chart's initial animation is finished

chart: { events: { animationEnd: function (chartContext, options) { // ... } } }

Fires before the chart has been drawn on screen

chart: { events: { beforeMount: function (chartContext, config) { // ... } } }

Fires after the chart has been drawn on screen

chart: { events: { mounted: function(chartContext, config) { // ... } } }

Fires when the chart has been dynamically updated either with updateOptions() or updateSeries() functions

chart: { events: { updated: function(chartContext, config) { // ... } } }

Fires when user clicks on any area of the chart.

chart: { events: { click: function(event, chartContext, opts) { // The last parameter opts contains additional information like `seriesIndex` and `dataPointIndex` for cartesian charts } } }

Fires when user moves mouse on any area of the chart.

chart: { events: { mouseMove: function(event, chartContext, opts) { // The last parameter opts contains additional information like `seriesIndex` and `dataPointIndex` for cartesian charts. } } }

Fires when user moves mouse outside chart area (exclusing axis).

chart: { events: { mouseLeave: function(event, chartContext, opts) { // ... } } }

Fires when user clicks on legend.

chart: { events: { legendClick: function(chartContext, seriesIndex, opts) { // ... } } }

Fires when user clicks on the markers.

chart: { events: { markerClick: function(event, chartContext, opts) { // ... } } }

Fires when user clicks on the x-axis labels.

chart: { events: { xAxisLabelClick: function(event, chartContext, opts) { // ... } } }

Fires when user selects rect using the selection tool. The second argument contains the yaxis and xaxis coordinates where user made the selection

chart: { events: { selection: function(chartContext, { xaxis, yaxis }) { // ... } } }

Fires when user clicks on a datapoint (bar/column/marker/bubble/donut-slice). The third argument (opts) also includes additional information like which dataPointIndex was selected of which series. If you have allowMultipleDataPointsSelection enabled, the third argument includes selectedDataPoints property to get all selected dataPoints.

Note: When using in line/area charts, this event requires tooltip.intersect: true & tooltip.shared: false along with markers.size has to be greater than 0.

chart: { events: { dataPointSelection: function(event, chartContext, opts) { // ... } } }

Fires when user's mouse enter on a datapoint (bar/column/marker/bubble/donut-slice). The third argument also includes additional information like which dataPointIndex was hovered of particular series.

Note: When using in line/area charts, this event requires tooltip.intersect: true & tooltip.shared: false along with markers.size has to be greater than 0

chart: { events: { dataPointMouseEnter: function(event, chartContext, opts) { // ... } } }

MouseLeave event for a datapoint (bar/column/marker/bubble/donut-slice).

chart: { events: { dataPointMouseLeave: function(event, chartContext, opts) { // ... } } }

This function, if defined, runs just before zooming in/out of the chart allowing you to set a custom range for zooming in/out.

  beforeZoom: function(chartContext, { xaxis }) {
    return {
      xaxis: {
        min: timestamp,
        max: timestamp
      }
    }
  }

The range which is returned in the beforeZoom function is used for the next zoom event.

This function, if defined, runs just before the user hits the HOME button on the toolbar to reset the chart to it's original state. The function allows you to set a custom axes range for the initial view of the chart.

  beforeResetZoom: function(chartContext, opts) {
    return {
      xaxis: {
        min: timestamp,
        max: timestamp
      }
    }
  }

The range which is returned in the beforeResetZoom function is used for resetting the chart axes to it's original state.

Fires when user zooms in/out the chart using either the selection zooming tool or zoom in/out buttons. The 2nd argument includes information of the new xaxis/yaxis generated after zooming.

chart: { events: { zoomed: function(chartContext, { xaxis, yaxis }) { // ... } } }

Fires when user scrolls using the pan tool. The 2nd argument includes information of the new xaxis generated after scrolling.

chart: { events: { scrolled: function(chartContext, { xaxis }) { // ... } } }

Fires when user drags the brush in a brush chart. The 2nd argument includes information of the new axes generated after scrolling the brush.

chart: { events: { brushScrolled: function(chartContext, { xaxis, yaxis }) { // ... } } }

Fires on keydown while the chart has keyboard focus. Useful for adding custom keyboard shortcuts on top of the built-in arrow-key navigation.

chart: { events: { keyDown: function(event, chartContext, opts) { // event is the native KeyboardEvent } } }

Fires on keyup while the chart has keyboard focus.

chart: { events: { keyUp: function(event, chartContext, opts) { // event is the native KeyboardEvent } } }