Dynamic update stacked column

[vcer]

I have a stacked column chart as below.

Code: Select all

const config : Highcharts.Options = {

          title: {
              text: title
          },


          chart: {
              borderWidth: 1,
              borderColor: '#AAA',
              borderRadius: 5,
              height: height,
          },


          accessibility: {
              enabled: false
          },
          exporting: {
              enabled: false
          },
          credits: {
              enabled: false
          },
          time: {
              useUTC: true
          },scrollbar: {
              enabled: false
          },
          rangeSelector: {
              buttons: [{
                  type: 'minute',
                  count: 30,
                  text: '30m'
              },{
                  type: 'hour',
                  count: 1,
                  text: '1h'
              },{
                  type: 'hour',
                  count: 3,
                  text: '3h'
              }],
              selected: 0,
              inputEnabled: false
          },
          yAxis: [{
              gridLineWidth: 0,
              labels: {
                  format: '{value} rpm'
              },
              softMax: 100,
              opposite: true

          }],
          tooltip: {
              split: false,
              shared: true
          },
          plotOptions: {
              column: {
                  stacking: 'normal',
                  dataLabels: {
                      enabled: false
                  }
              }
          },
          series: [],
          
      };


      chart = Highcharts.stockChart( container, config);

Every 30 seconds, the chart is updated with data dynamically

Code: Select all

    for( let index = 0; index < model.length; index ++){
        if( chart.series.length - 1 < index ) {
          chart.addSeries({
              index: index,
              yAxis: 0,
              name: model[index].hostname,
              type: 'column',
              data: model[index].data,
              threshold: null,
              color: Highcharts.getOptions().colors[index]
          }, false);
        } else {
          chart.series[index].setData(model[index].data);
        }
      }

      chart.redraw();

As you see, the above code checks if the series exists; If it is already there, no new serise is created by update the existing data.
This code works well for `line` chart, while for stacked column chart, it causes more and more columns stacked over existing stacks

ss.png (3.45 KiB) Viewed 216 times

I tried to remove all series then update, that does not help

Please what problem it is?

[kamil.m]

Hello,

Welcome to our forum and thank you for contacting us with your question.

Stacked columns work by stacking each series on top of each other. Basically, if you have 10 series, then you have 10 stacks in each column. If you have 100 series, than you have 100 stacks. To get more columns instead of stacks, you need to add points to each series (on a line chart it would reflect in more point's in the same line).

It can be done with series.addPoint method: https://api.highcharts.com/class-refere ... s#addPoint

Do not hesitate to contact us again,
Best regards!