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 dont want to make the chart variable global.

Answer 1

you can do this

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

check example on fiddler

Answer 2

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:

1. Give an identifying class to the chart using className attribute

   chart: {
       className: 'LifeCycleMasterChart'
   }
   

2. 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;
   

   }

3. Use the auxiliary function wherever you need it

   var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
   

Hope it helps you!

Answer 3

Simply with pure JS :

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