Updating single category data in Highcharts column chart

Question

I am trying to use a column chart with single category but 4 values. The initial rendering of the graph works fine. However, when I use series[0].setData() method to update the data, it creates 4 categories as opposed to updating the single category.

Here is the jsfiddle link

$(function() {
  var chart;
  $(document).ready(function() {
    chart = Highcharts.chart('container', {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Packet Summary Stats'
      },
      subtitle: {
        text: 'Source: ABC'
      },
      xAxis: {
        categories: [
          'Packet Summary'
        ],
        crosshair: true
      },
      yAxis: {
        min: 0,
        title: {
          text: 'Packet Count'
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 1
        }
      },
      series: [{
        "data": [100],
        "name": "Rx"
      }, {
        "data": [90],
        "name": "Tx"
      }, {
        "data": [10],
        "name": "Dropped"
      }, {
        "data": [10],
        "name": "No Match"
      }]
    });
  });

  $('#button').click(function() {
    chart.series[0].setData([
      [200],
      [180],
      [20],
      [20]
    ]);
  });
});

I am unable to figure out what am I doing wrong here. Any help is appreciated.

Thanks

As an actual explanation to the answer below by Deep3015: you have four different series, each with one data point. But when you call your update function, you are only updating one series (chart.series[0]), with four data points. The chart adds three new categories to fit the three extra data points for Series 1, and has no data to add for Series 2-4. You need to call setData() for each series individually (or, don't use four different series - you can simplify both your code and your visual display by using a single series instead...) — jlbriggs
Quick example using single series: jsfiddle.net/jlbriggs/mhuzmnev — jlbriggs
For correct answers only working code is not enough. proper explanation is also written. thanks for explanation — Deep 3015
Thanks jlbriggs for the explanation. I really overlooked the series aspect and hence couldn't figure it out! — Vivek Kandhvar

Deep 3015 Deep 3015 · Accepted Answer · 2017-04-18T10:04:09

You have to update chart as

Fiddle

   $('#button').click(function() {
    chart.series[0].setData(
      [200]
    );
     chart.series[1].setData(
      [180]
    );
     chart.series[2].setData(
      [20]
    );
     chart.series[3].setData(
      [20]
    );
  });

Updating single category data in Highcharts column chart

1 Answers