Highcharts-ng with multiple series draw chart incorrectly

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

score 0 · Accepted Answer · answered Apr 01 '16 at 18:55

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/

Highcharts-ng with multiple series draw chart incorrectly

1 Answers1