Highchart events

Hello community,

last month, I wrote about a blog about the Highcharts library and how I was going to include it on a sapui5 application. While asking for feedback on that blog to a few colleagues including my coworker Tim Champagne, he suggested for me to expand on some of the events that this charting library has to offer.

I went ahead and I dug some information about the events related to some of the common libraries I was going to be using on my application, for example the click event on the charts. Luckily, the chart object has very similar implementation so here are three common examples: (the code snippets below show part of the object needed to create the chart)

The Bar chart

Documentation url: https://api.highcharts.com/highcharts/series.bar.events
Probably the most common chart is the bar chart. This is the twin sibling of the column chart (https://www.highcharts.com/docs/chart-and-series-types/bar-chart) . The difference is that columns is vertical while bars are horizontal.

In the code snippet below, you can see the event at the series level – the common event I would like showcase is the click event, as this event is usually needed to drill down or even trigger any other data load into the ui. – it looks very simple and yes it is

The Pie Chart

Documentation url:  https://api.highcharts.com/highcharts/series.pie

Probably the secondly most used chart (after bar/column)  is the pie chart. This chart is good to showcase sections of a whole data set that belong to a certain type of measure. Again, in the code snippet below, I am showcasing the click event under the series.

Notice however, that the events could not only be applied at the series level (more granular), but also at the chart level (less granular).

In this exercise, I wanted to showcase the different areas of the chart that allow us to bind events to. One would be at the chart level, perhaps to show case something as a whole, while the event at the section level may only showcase the individual section/point we clicked.

The Gauge chart

Documentation url: https://api.highcharts.com/highcharts/series.gauge.events.click

In this example, I am showing two different events… the common click event first… and also the event called afterAnimate (which also exists for the pie/bar/column charts) that triggers after the data is loaded and the chart is draw on the screen.

The positive thing about the implementation of this library is that the events are shared amongst the different chart types, therefore it is easy to do one and follow the same pattern on the other ones in case you are experimenting with various chart types.

The challenging part about the implementation – not really, or probably the tedious part about any new library documentation – is that you need to spend some time in understanding it and reading what is available as well as to how they share similarities amongst the different controls/features.

As I mentioned on my previous blog… by far this library has had one of the most complete and accurate documentation and it is easy to read as a developer.

thank you again for reading this short blog – please make any comments, or ask questions if you have any. Share the blog and also your experiences. have a great weekend!