Updating data in charts, graphics cards with angular, highcharts-ng

Question

Try the highcharts directive for angular, highcharts-ng. https://github.com/pablojim/highcharts-ng

I have a problem updating the data. Updating series values ​​is not a problem. But I can’t update the X-axis headers. I have a js fiddle here http://jsfiddle.net/user1572526/3stqK/2/

I have chartConfig in my factory:

myapp.factory('Chart', function () { var chartConfig = { options: { chart: { type: 'column' } }, series: [{ data: [10, 15, 12, 8, 7] }], xAxis: [{ categories: ['old bar title', 'old bar title 2 '] }], title: { text: 'Hello' }, loading: false } return chartConfig; }); 

Then I expose it in my controller:

 myapp.controller('myctrl', function ($scope, Chart) { $scope.chartConfig = Chart; 

And finally, a function to set some new values

 $scope.update = function () { $scope.chartConfig.title.text = "Setting new title"; //Works $scope.chartConfig.series = [{ //Works "name": "Updated data", "data": [1, 2, 4, 7, 3] }]; $scope.chartConfig.xAxis = [{ //NOT WORKING categories: ['new bar title', 'new bar title2'] }] console.log($scope.chartConfig); } 

Everything works except X-Axis.

Any idea what might be wrong here?

Answer 1

xAxis should be an object, not an array. The configuration should be configured as follows:

  xAxis: { categories: ['old bar title', 'old bar title 2 '] } 

And the update should be:

  $scope.chartConfig.xAxis.categories = ['new bar title', 'new bar title2'];