In the previous chapter, we learned about the Highcharts API. In this chapter, we will go through Highcharts events handling. We will start the chapter by introducing the set of events supported by Highcharts. Then, we will build two web applications to cover most of the events; each one explores a different set of events. Although the applications are far from perfect and there is plenty of room for improvement, the sole purpose is to demonstrate how Highcharts events work. In this chapter, we will cover the following topics:
load
eventredraw
eventselect
and unselect
eventsmouseover
and mouseout
eventsclick
event to create plot linesclick
eventcheckboxClick
eventclick
, update
, and remove
eventsBy now, we have gone through most of the Highcharts configurations, but there is one area not yet covered: event handling. Highcharts offers a set of event options in several areas such as chart events, series events, and axis base events; they are triggered by API calls and user interactions with the chart.
Highcharts events can be specified through object configuration while creating a chart or through APIs that accept object configurations, such as Chart.addSeries
, Axis.addPlotLine
, and Axis.addPlotBand
.
An event object is passed by an event handler that contains mouse information and specific action data related to the event action. For example, event.xAxis[0]
and event.yAxis[0]
are stored in the event parameter for the chart.events.click
handler. Inside each event function, the 'this'
keyword can be used and refers to a Highcharts component where the event function is based. For example, the 'this'
keyword in chart.events.click
refers to the chart
object, and the 'this'
keyword in plotOptions.series.events.click
refers to the series
object being clicked.
The following is a list of Highcharts events:
chart.events
: addSeries
, click
, load
, redraw
, selection
, drilldown
, and drillup
plotOptions.<series-type>.events
: click
, checkboxClick
, hide
, mouseover
, mouseout
, show
, afterAnimate
, and legendItemClick
plotOptions.<series-type>.point.events
: click
, mouseover
, mouseout
, remove
, select
, unselect
, update
, and legendItemClick
x/yAxis.events
: setExtremes
, and afterSetExtremes
x/yAxis.plotBands[x].events
and x/yAxis.plotLines[x].events
: click
, mouseover
, mousemove
, and mouseout
The Highcharts online documentation provides a comprehensive reference and plenty of mini examples; you are strongly advised to refer to that. There is not much point in repeating the same exercise. Instead, we will build two slightly sizable examples to utilize most of the Highcharts events and demonstrate how these events can work together in an application. Since the complete example code is too long to list in this chapter, only the relevant parts are edited and shown.
The full demo and source code can be found at http://www.joekuan.org/Learning_Highcharts/Chapter_11/chart1.html.
18.191.54.245