events
animationEnd: function
Fires when the chart’s initial animation is finished
chart: {
events: {
animationEnd: function (chartContext, options) {
// ...
}
}
}
beforeMount: function
Fires before the chart has been drawn on screen
chart: {
events: {
beforeMount: function (chartContext, config) {
// ...
}
}
}
mounted: function
Fires after the chart has been drawn on screen
chart: {
events: {
mounted: function(chartContext, config) {
// ...
}
}
}
updated: function
Fires when the chart has been dynamically updated either with
chart: {
events: {
updated: function(chartContext, config) {
// ...
}
}
}
click: function
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
}
}
}
mouseMove: function
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.
}
}
}
mouseLeave: function
Fires when user moves mouse outside chart area (exclusing axis).
chart: {
events: {
mouseLeave: function(event, chartContext, opts) {
// ...
}
}
}
legendClick: function
Fires when user clicks on legend.
chart: {
events: {
legendClick: function(chartContext, seriesIndex, opts) {
// ...
}
}
}
markerClick: function
Fires when user clicks on the markers.
chart: {
events: {
markerClick: function(event, chartContext, opts) {
// ...
}
}
}
xAxisLabelClick: function
Fires when user clicks on the x-axis labels.
chart: {
events: {
xAxisLabelClick: function(event, chartContext, opts) {
// ...
}
}
}
selection: function
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 }) {
// ...
}
}
}
dataPointSelection: function
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) {
// ...
}
}
}
dataPointMouseEnter: function
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) {
// ...
}
}
}
dataPointMouseLeave: function
MouseLeave event for a datapoint (bar/column/marker/bubble/donut-slice).
chart: {
events: {
dataPointMouseLeave: function(event, chartContext, opts) {
// ...
}
}
}
beforeZoom: function
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.
beforeResetZoom: function
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.
zoomed: function
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 }) {
// ...
}
}
}
scrolled: function
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 }) {
// ...
}
}
}
brushScrolled: function
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 }) {
// ...
}
}
}
