Trying out a highcharts directive for angular, highcharts-ng. https://github.com/pablojim/highcharts-ng
I have some problem with updating the data. Updating the series values is no problem. But I cant update the X-axis titles. I have a js-fiddle here http://jsfiddle.net/user1572526/3stqK/2/
I have the 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 the X-Axis.
Any idea what can be wrong here?
The xAxis should be an object and not an array. The config should be set up like so:
xAxis: {
categories: ['old bar title', 'old bar title 2 ']
}
And the update should be:
$scope.chartConfig.xAxis.categories = ['new bar title', 'new bar title2'];