Updating single category data in Highcharts column chart - highcharts

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

Answer 1

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]
);
});