Highcharts Tips – Accessing chart object from container id

Given the following container for Highcharts, how do you access the appropriate chart object from the container’s id?

Let’s see how we can get a handle of the chart object to display the title

Highcharts 3.0.1+

Highcharts 3.0.1 has made it fairly straightforward like most jQuery plugins

Highcharts 2.3.4+

For Highcharts 2.3.4+ the array Highcharts.charts could be used in conjunction with the data-highcharts-chart attribute to get the position of the chart in the array

 

Highcharts.charts    

An array containing the current chart objects in the page. A chart’s position in the array is preserved throughout the page’s lifetime. When a chart is destroyed, the array item becomes undefined.

If you have only a single chart on your page, you can smartly predict the index to be 0 and skip the first step

All Versions

For versions before 2.3.4 you would need to track/manage the object yourself. We could use a map/object to store the charts by Id

If you have only a single chart on the page, you could simplify to just a  window.chart  object

References

Jugal Thakkar

Jugal Thakkar is a C# professional, JavaScript expert and an Android fan boy. He forges user-friendly enterprise web applications and enjoys data crunching & visualization. He is passionate about mobile and web technologies & appreciates open source.

He has been a preacher of Highcharts since he got acquainted with it at work & now attempts to help developers on Stack Overflow with his little knowledge. He occasionally blogs about Highcharts & has been a reviewer of the Highcharts Cookbook recently.

Jugal relishes playing Ping-Pong, solving puzzles or trying his luck at a Bowling alley. To know of what he learns, experiments and explores visit http://jugal.me/ or follow his blog, A Humble Opinion, @ https://ahumbleopinion.com/

Latest posts by Jugal Thakkar (see all)