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

Show Example:
AngularJS
Knockout
jQuery

In this example, when you click a series, the chart calculates the maximum point value from this series and outputs it below. To get all points of the clicked series, the series' getAllPoints method is used.


                                    

                                    

In this example, when you click a series, the chart calculates the maximum point value from this series and outputs it below. To get all points of the clicked series, the series' getAllPoints method is used.


                                    

                                    

In this example, when you click a series, the chart calculates the maximum point value from this series and outputs it below. To get all points of the clicked series, the series' getAllPoints method is used.


                                    

                                    

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.

Show Example:
AngularJS
Knockout
jQuery

In this example, when you click a point, information about the argument of this point appears below the chart. This information is taken from the tag field that is specified for each argument in the chart data source.


                                    

                                    

In this example, when you click a point, information about the argument of this point appears below the chart. This information is taken from the tag field that is specified for each argument in the chart data source.


                                    

                                    

In this example, when you click a point, information about the argument of this point appears below the chart. This information is taken from the tag field that is specified for each argument in the chart data source.


                                    

                                    

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.

Show Example:
AngularJS
Knockout
jQuery

In this example, when you click a legend item, the chart calculates the maximum point value from this series and outputs it below. To get the points of the series to which the clicked legend item belongs, the series' getAllPoints method is used.


                                    

                                    

In this example, when you click a legend item, the chart calculates the maximum point value from this series and outputs it below. To get the points of the series to which the clicked legend item belongs, the series' getAllPoints method is used.


                                    

                                    

In this example, when you click a legend item, the chart calculates the maximum point value from this series and outputs it below. To get the points of the series to which the clicked legend item belongs, the series' getAllPoints method is used.