Why code of Horizonal line(y-axis) on a single in Highcharts get applied to all other charts integrated with Webdatarocks

Question

I have multiple Highcharts integrated with Webdatarocks. I require a Horizontal line on a single chart and for that I am using below code. This works as expected but issue I am facing is

• it add Horizontal line in all other Highcharts even though I have added code in single chart only.
• Sorting in Highcharts get intermixed with other charts.

Please advice how to make one chart independent of other chart such that it doesn't use properties of each other.

data => {
      this.Highcharts.setOptions({
        yAxis: {
          plotLines: [{
              color: 'blue',
              width: 2,
              value: 25,
              zIndex: 5,
              label:{
                text:"label1",
                align:'left'
              }
          }]
      },
        plotOptions: {
          
          series: {
            borderWidth: 0,
            dataSorting: {
              enabled: true,
            },
            dataLabels: {
              enabled: true,
              formatter: function () {
                let value = (this.y);
                return '' + value.toFixed(1);
              }

            },  // set colors of the series
          }
        }
      });
      createAndUpdateChart(data);
    },

Answer 1

The setOptions sets the options to all charts on the same page.

Try setting the options to the data in the callbackHandler and updateHandler of each chart.

Like this:

function(data){
  data.title = {text: 'My title'},
  Highcharts.chart('highchartsContainer', data);
}