How can I get access to a Highcharts chart through a DOM-Container?
JavascriptJqueryHtmlDomHighchartsJavascript Problem Overview
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();
Javascript Solutions
Solution 1 - Javascript
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
Solution 2 - Javascript
Solution 3 - Javascript
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
Solution 4 - Javascript
Simply with pure JS :
var obj = document.getElementById('#container')
Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
Solution 5 - Javascript
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
attributechart: { 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!
Solution 6 - Javascript
Without jQuery (vanilla js):
let chartDom = document.getElementById("testDivId");
let chart = Highcharts.charts[Highcharts.attr(chartDom, 'data-highcharts-chart')]
Solution 7 - Javascript
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();
Solution 8 - Javascript
... 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;
}
Solution 9 - Javascript
@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
: