Uncaught TypeError: Cannot read properties of undefined (reading '0')

Question

When I change minmax by clicking on Change MinMax of Chart1 button, sets chart1 extremes with the new passed in values. Working Fiddle: https://jsfiddle.net/we8Lh0rx/23/

This fiddle has no issues accessing chartEp0,chartEp1 or chartEp2 while setting MinMax. Below is how chart variables are declared here.

     var chartEp0, chartEp1, chartEp2;
 
     //chart1
     chartEp0 = Highcharts.chart('chart1', {});

Refactored the code (to make it more maintainable). Now I get error as Uncaught TypeError: Cannot read properties of undefined (reading '0') for chartEp0, when I click on Change MinMax of Chart1 . Please find the refactored code which has issue: https://jsfiddle.net/v5fphnwd/47/

Below is how chart variables are declared now.

create() {
  const highchart = Highcharts.chart(this.container, {}
}

const chartEp0 = new Chart(chart1,  1, 'NorthAmerica1', data);
chartEp0.create();

Believe chartEp0 is not in the scope of SetMinMax for it to be used. How can I fix this. Thank you.

Answer 1

That's because chartEp0 is an object created based on Chart class, not on Highchcharts.chart and there is no yAxis property. You can for example store the created chart and refer to it by chartEp0.chart .

class Chart {
  ...
  create() {
    this.chart = Highcharts.chart(this.container, {
      ...
    });
  }
}

---

Live example: https://jsfiddle.net/BlackLabel/gt0wy3q1/