Search code examples
highcharts-ng

Highcharts-ng with multiple series draw chart incorrectly

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 enter image description here

Angular screenshot enter image description here

Solution

  • 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/