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

@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:

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

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

Without jQuery (vanilla js):

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

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!

Simply with pure JS :

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

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

you can do this

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

check example on fiddler