I render a Highcharts chart in a div with id container like so:

new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'line',
        zoomType: 'x'
    },

    xAxis: {
        categories: ['Jan', 'Feb']
    },

    series: [{
        data: [29.9, 71.5]
    }]
});

<div id="container" class="chart"></div>

Notice that I haven't captured a reference to the chart object in a variable. At some point after the chart has been rendered is it possible to get a reference to the chart object from the ID of the element it has been rendered to (container in this case)?

I render a Highcharts chart in a div with id container like so:

new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'line',
        zoomType: 'x'
    },

    xAxis: {
        categories: ['Jan', 'Feb']
    },

    series: [{
        data: [29.9, 71.5]
    }]
});

<div id="container" class="chart"></div>

Notice that I haven't captured a reference to the chart object in a variable. At some point after the chart has been rendered is it possible to get a reference to the chart object from the ID of the element it has been rendered to (container in this case)?

• javascript
• highcharts

2 Answers 2

With jQuery

var Mychart=$("#container").data('highchartsChart');

or

var Mychart=$("#container").highcharts();

jsfiddle

or via the Highcharts' charts array ([0] if your chart is the first)

var Mychart = Highcharts.charts[0];

You can access it through the Highcharts object. Every chart created with Highcharts will be pushed into Highcharts' charts array. If this is the first chart you've created, you can get a reference to it like so:

var chart = Highcharts.charts[0];

Your element itself will contain a reference to the index of the above array within it's dataset property. Again, if this is the first chart you've created, you'd see something like the following:

document.getElementById('container').dataset;

> DOMStringMap { highchartsChart: "0" }

This highchartsChart property holds the relevant array index, which you can then use to ensure you have the correct chart selected:

var index = document.getElementById('container').dataset.highchartsChart,
    chart = Highcharts.charts[index];