When i render a highcharts-chart to a div container, how can i get access to the chart object through the div-Container? i dont 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();
Users can use the highcharts plugin
var chart=$("#container").highcharts();
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];
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
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