How can I get access to a Highcharts chart through a DOM-Container?

Question

When I render a highcharts-chart to a div container, how can I get access to the chart object through the div-Container?

I don't want to make the chart variable global.

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: "testDivId",
                                ...

I want to access the chart outside of the context above like this (pseudocode), to call functions:

var chart = Highcharts.Chart("testDivId"); //access from id
chart.redraw();

score 146 · Accepted Answer · edited May 20 '22 at 17:59

146

Highcharts 3.0.1

Users can use the highcharts plugin

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

Highcharts 2.3.4

Read from the Highcharts.charts array, for version 2.3.4 and later, the index of the chart can be found from the data on the <div>

 var index=$("#container").data('highchartsChart');
 var chart=Highcharts.charts[index];

All versions

Track charts in a global object/map by container id

var window.charts={}; 
function foo(){
  new Highcharts.Chart({...},function(chart){  
      window.charts[chart.options.chart.renderTo] = chart;
  });
}

function bar(){
  var chart=window.charts["containerId"];
}

Read Mode @ Highcharts Tips - Accessing Chart Object From a Container ID

P.S.

Some additions were made in the newer versions of Highcharts since writing this answer and have been taken from answers from @davertron, @Nerdroid and @Frzy, please upvote their comments/answers as they deserve the credit for these. Adding them here as this accepted answer would be incomplete without these

edited May 20 '22 at 17:59

codewario

19,553
20
90
159

answered Oct 24 '12 at 14:55

Jugal Thakkar

13,432
4
61
79

11

It looks like as of version 2.3.4 Highcharts does keep track of all of the charts on the page: http://api.highcharts.com/highcharts#Highcharts – davertron Jan 02 '13 at 15:09
@davertron thanks for the update... thats a nice feature to have, don't think much code/effort was required to have this... – Jugal Thakkar Jan 02 '13 at 17:18
+1 for $("#container").data('highchartsChart') as the highcharts index. it's very useful, thanks! – Shahar Jul 12 '17 at 12:10
1

Any similar method I could use for highstock? – tnkh Sep 26 '17 at 04:43

Nerdroid · Answer 2 · 2015-05-18T04:17:50.507

45

you can do this

var chart = $("#testDivId").highcharts();

check example on fiddler

edited May 18 '15 at 04:17

answered Apr 15 '13 at 04:57

Nerdroid

13,398
5
58
69

It didn't work for me, I had to use the @Frzy answer. I am using the version 4.1.4 – David Torres Apr 05 '16 at 10:07
not sure why it didn't work for you the fiddle example uses v4.2.3 – Nerdroid Apr 05 '16 at 11:41
1

It is returning the container element instead of the chart, and that is why @Frzy answer worked. Also, I found another solution: `$("#testDivId").highcharts({...}, function(chart) {...});` – David Torres Apr 05 '16 at 11:56
it's definitely returning the object http://jsfiddle.net/abbasmhd/86hLvc5s/ check the console output after you click the button – Nerdroid Apr 05 '16 at 12:10
1

Yes, in the jsfiddle is doing that, I agree. But not for everybody is working the same, as you can see by the 11 upvotes of @Frzy answer – David Torres Apr 05 '16 at 12:53

score 22 · Answer 3 · edited Aug 16 '13 at 01:35

22

var $chartCont = $('#container').highcharts({...}),
    chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];

chartCont is jQuery Object. chartObj is Highchart Chart Object.

This is using Highcharts 3.01

edited Aug 16 '13 at 01:35

SheetJS

22,470
12
65
75

answered May 03 '13 at 22:33

Frzy

339
3
5

score 10 · Answer 4 · edited Aug 22 '19 at 20:58

10

Simply with pure JS :

var obj = document.getElementById('#container')
    Highcharts.charts[obj.getAttribute('data-highcharts-chart')];

edited Aug 22 '19 at 20:58

Wallace Sidhrée

11,221
6
47
58

answered Jan 10 '18 at 22:11

elo

113
1
6

score 9 · Answer 5 · edited Jul 19 '13 at 11:35

I found another way of doing it... mainly because I'm using Highcharts that are embedded in OutSystems Platform, and I don't have a way to control the way charts are created.

The way that I found was the following:

Give an identifying class to the chart using className attribute
```
chart: {
    className: 'LifeCycleMasterChart'
}
```

Define an auxiliary function to get the chart by class name

function getChartReferenceByClassName(className) {
var cssClassName = className;
var foundChart = null;

$(Highcharts.charts).each(function(i,chart){    
    if(chart.container.classList.contains(cssClassName)){
        foundChart = chart;
        return;
    }
});

return foundChart;

}

Use the auxiliary function wherever you need it

var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');

Hope it helps you!

score 5 · Answer 6 · answered Jan 05 '18 at 10:37

5

Without jQuery (vanilla js):

let chartDom = document.getElementById("testDivId");
let chart = Highcharts.charts[Highcharts.attr(chartDom, 'data-highcharts-chart')]

answered Jan 05 '18 at 10:37

Tauka Kunzhol

98
2
9

score 4 · Answer 7 · answered Oct 24 '12 at 13:41

var chart1; // globally available
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            type: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });

The var chart1 is global so you can use to access de highchart object doesnt matter wich is the container

chart1.redraw();

score 2 · Answer 8 · answered Jul 19 '13 at 13:50

2

... and with the help of a colleague... a better way to do it is...

getChartReferenceByClassName(className) {
    var foundChart = $('.' + className + '').eq(0).parent().highcharts();

    return foundChart;
}

answered Jul 19 '13 at 13:50

Pedro Cardoso

373
3
7

score 1 · Answer 9 · answered Aug 22 '19 at 21:29

@elo's answer is correct and upvoted, though I had to tidy it a little to make it clearer:

const myChartEl = document.getElementById('the-id-name');
const myChart = Highcharts.charts[myChartEl.getAttribute('data-highcharts-chart')];

myChart then becomes a live Highcharts object that exposes all current props present in the chart that's rendered in the myChartEl. Since myChart is a Highcharts object, one can chain prototype methods right after it, extend it or refer to it.

myChart.getTable();
myChart.downloadXLS();
setTimeout(() => Highcharts.fireEvent(myChart, "redraw"), 10);

One can also get myChart through .highcharts(), which is a jQuery plugin:

var myChart = $("#the-id-name").highcharts();

The jQuery plugin approach above requires jQuery to be loaded before the plugin is used, and of course the plugin itself. It was the absence of this plugin that got me into looking for alternative ways to accomplish the same with pure vanilla JavaScript.

By using the pure JS approach I was able to do what I needed (the second code snippet) without having to rely on jQuery:

How can I get access to a Highcharts chart through a DOM-Container?

9 Answers9

Highcharts 3.0.1

Highcharts 2.3.4

All versions

P.S.

Linked