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, @ http://ahumbleopinion.com/

Latest posts by Jugal Thakkar (see all)

  • Ritesh Kumar

    How can I check Highcharts is showing right data.? How can take data from Populated Highchart.?

  • DY Liu (柳丁元)

    I put

    var chart=$(“#containerId”).highcharts();

    in :

    $(function () {
    $(‘#containerId’).highcharts({
    ….
    });

    function aa(){

    var chart=$(“#containerId”).highcharts();
    console.log(chart);
    return;
    }

    but the console.log(chart) always show ‘undefined’

    where is(are) the problem(s) ?

    Thanks

    • http://jugal.me/ Jugal Thakkar

      what version of highcharts are you using? This was added in Highcharts 3.0.1+

      • DY Liu (柳丁元)

        I use version 4.2.5
        I have tried this way on other highcharts,it work.
        but this is not work. till now i dont know where is wrong

      • DY Liu (柳丁元)

        the more interesting is
        console.log($(“#containerId”)) //show object…balabala
        console.log($(“#containerId”).highcharts) //show function()

        but
        console.log($(“#containerId”).highcharts()) //show undefinded

        • http://jugal.me/ Jugal Thakkar

          Can you make sure you are calling $(“#containerId”).highcharts() after the chart is created?

          • DY Liu (柳丁元)

            Oh!
            I thinks this is the problem.
            Many thanks