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 } } }

Fires before a drill-down transition begins. Requires the Drilldown feature: import 'apexcharts/features/drilldown'.

The first argument is the drill event itself, carrying from, to and the clicked point, so the chart context arrives second rather than first as it does for the pointer events above.

chart: { events: { drillDownStart: function(info, chartContext, opts) { // info.from, info.to, info.point } } }

Fires after a drill-down transition completes, which is the point at which the child level is on screen. Requires the Drilldown feature.

chart: { events: { drillDownEnd: function(info, chartContext, opts) { // ... } } }

Fires after navigating back up a drilldown level, whether from the breadcrumb, chart.drillUp() or chart.drillToRoot(). Requires the Drilldown feature.

chart: { events: { drillUp: function(info, chartContext, opts) { // info.to is 'root' at the top level } } }

Fires when an async drilldown.onDrillDown resolver throws or rejects. Without it a failed resolver is silent, so this is the hook to log or surface the failure. Requires the Drilldown feature.

The first argument is { id, error }, where id is the level that could not be loaded.

chart: { events: { drillDownError: function({ id, error }, chartContext, opts) { // ... } } }

Fires after an annotation is created, either by clicking the plot in create mode or from the context menu as a note or dashed line. Part of the Ink layer.

options carries the new annotation's type ('point', 'xaxis' or 'yaxis'), its id and index, and its x and/or y.

chart: { events: { annotationCreated: function(chartContext, { type, id, index, x, y }) { // ... } } }

Fires after an annotation is dragged or resized. options carries the annotation type, id and index, and the new data coordinates: x and y, plus x2 and y2 for range annotations.

chart: { events: { annotationDragged: function(chartContext, { type, id, index, x, y, x2, y2 }) { // persist the new position } } }

Fires after a point annotation's label is edited inline. options carries the annotation id and index and the new label text.

chart: { events: { annotationEdited: function(chartContext, { id, index, text }) { // ... } } }

Fires after an annotation is restyled from the floating note editor: accent color, bold, font size, or marker size and shape. options carries the annotation type, id and index alongside its current label and marker config.

chart: { events: { annotationStyled: function(chartContext, { type, id, index, label, marker }) { // ... } } }

Fires after an annotation is deleted from the floating note editor. options carries the annotation type and id, and the index it occupied before removal.

chart: { events: { annotationDeleted: function(chartContext, { type, id, index }) { // ... } } }

Fires on the source chart when a brush range drives a crossfilter across a linked group. options carries the xaxis range and the sourceChartID.

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

Fires on the source chart in filter mode, when a click toggles a crossfilter bucket. options carries the coordinator state: the active filters, filteredCount against total, the sourceChartID, and the key that was toggled.

chart: { events: { filterChange: function(chartContext, { filters, filteredCount, total, key }) { // ... } } }

Fires when a measure ruler is drawn. Requires the measure feature.

options carries the endpoints as from and to, and the deltas the ruler computed: dx, dy, percentChange and slope.

chart: { events: { measured: function(chartContext, { from, to, dx, dy, percentChange, slope }) { // ... } } }

Fires when scrolling, or a goTo call, activates a storyboard beat. Requires the storyboard feature and an active chart.storyboard.bind().

chart: { events: { beatChange: function(chartContext, beatInfo) { // ... } } }