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(); 

Answer 1

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, @Moes and @Przy, please upvote their comments/answers as they deserve the credit for these. Adding them here as this accepted answer would be incomplete without these

Answer 2

you can do this

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

check example on fiddler