Highcharts-ng with multiple series draw chart incorrectly - highcharts-ng

Question

I have two fiddles: no angular, and using angular. The one with the angular doesn't work correctly. It doesn't show dates in xAxis, and doesn't use percent for yAxis.
Is there something specific need to be done, to have that work with angular?
No angular html
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
Angular html
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div ng-app="myApp">
<div ng-controller="myctrl">
<highchart id="chart1" config="ipo" class="span9"></highchart>
</div>
</div>
Not angular javascript
$(function () {
function createChart() {
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: [{
name: 'IPO',
data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]]
}, {
name: 'SPX',
data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]]
}]
});
}
createChart();
});
Angular javascript
var myApp = angular.module('myApp', ['highcharts-ng']);
myApp.controller('myctrl', BindingCode);
myApp.factory("Factory", Factory);
function ipo() {
this.chartConfig = {
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: [{
name: 'IPO',
data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]]
}, {
name: 'SPX',
data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]]
}]
}
}
function BindingCode($scope,Factory) {
$scope.ipo = Factory.CreateChart();
$scope.ipo = $scope.ipo.chartConfig;
}
function Factory() {
return {
CreateChart: function () {
return new ipo();
}
}
}
Not angular screenshot
Angular screenshot

Answer 1

The problem is that not all the highchart options go into the top-level JSON configuration.
From the FAQ:
Why doesn't my plot options/tooltip/drilldown/other feature work?
At least half of all issues filed are due to this. Before you file an
issue read this! A common error is to put other Highcharts options
directly into the chartConfig. In general if the Highcharts option you
want isn't listed above you probably want to put it in
chartConfig.options.
In your case, you need to move pretty everything except 'series' into an options object.
chartConfig = {
options : {
rangeSelector: {
selected: 4
},
type: "line",
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}],
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
}
},
series: [{
name: 'IPO',
data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]]
}, {
name: 'SPX',
data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]]
}]
}
Updated fiddle
https://jsfiddle.net/mgwkzob3/1/