Click Handling

This topic explains how to handle user clicks. To learn about hover and selection, refer to the Hover Handling and Selection Handling topics, respectively.

Series Click

You can handle a series click. To do this, implement a callback function and assign it to the chart's onSeriesClick option.

JavaScript
var chartOptions = {
    onSeriesClick: function (info) {
        //...
    }
};

The onSeriesClick callback function accepts an object that contains information on the click event. Fields of this object are described in the onSeriesClick option description. Among these fields, you can find the clicked series. An object that represents this series is described in the Series section.

NOTE
There are series that consist of points only, e.g., the bar-like and candleStick series of the Chart widget, and the pie and doughnut series of the PieChart widget. The onSeriesClick function is not called when clicking a point (a bar or a slice) in these types of series. To handle click for these series, implement the onPointClick callback function and access the series of the clicked point (see the Point Click topic).

Point Click

You can handle the click on a data point of any type (point, bar, pie slice, etc.). To do this, implement a callback function and assign it to the onPointClick option of the chart's configuration object.

JavaScript
var chartOptions = {
    onPointClick: function(info){
        //...
    }
};

The onPointClick callback function accepts an object that contains information on the click event. Fields of this object are described in the onPointClick option description of Chart and PieChart. Among these fields, you can find the clicked point. An object that represents this point is described in the Point section.

Legend Click

In addition to a click on a point or a series, you can handle a click on a legend item. To do this, implement a callback function and assign it to the onLegendClick option of the chart's configuration object.

JavaScript
var chartOptions = {
    onLegendClick: function(info) {
        //...
    }   
};

The onLegendClick callback function accepts an object that contains information on the legend click event. Fields of this object are described in the onLegendClick option description of Chart and PieChart. Among these fields, you can find the series (in Chart) or the argument of the points (in PieChart) that correspond to the clicked legend item.

NOTE
If the onLegendClick option is not specified, a click on the legend will invoke the function assigned to the onSeriesClick option in Chart. To prevent this behavior, assign at least an empty function to the onLegendClick field.