Using HighStocks with highcharts-ng

Question

I'm using the Angular directive for HighCharts, https://github.com/pablojim/highcharts-ng.

However I want to use the HighStock option which should be possible according to the above link by setting useHighStocks: true.

When I try this the chart won't load at all, but works just fine when it's set to false. I even tried to include the highstock.js from official site but with no luck.

Original jsfiddle: http://jsfiddle.net/pablojim/7cAq3/

My non-working highstock jsfiddle: http://jsfiddle.net/achronos/7LZv4/1/

$scope.chartConfig = {
    options: {
        chart: {
            type: 'line',
            zoomType: 'x'
        }
    },
    series: [{
        data: [10, 15, 12, 8, 7, 1, 1, 19, 15, 10]
    }],
    title: {
        text: 'Hello'
    },
    xAxis: {currentMin: 0, currentMax: 10, minRange: 1},
    loading: false,
    useHighStocks: true
}

What can I do to make it work? Thanks

score 15 · Accepted Answer · answered May 20 '14 at 12:43

15

I solved it on my own, apparenty you can't include both highcharts.js and highstock.js at the same time. When including highstock.js, the highcharts.js functionality is included, however it does not work vice versa.

So, the trick is to only include highstock.js!

answered May 20 '14 at 12:43

Oskar Eriksson

845
1
9
28

@Oskar Eriksson Thanks This is really useful and saved a lot of time for me – Alok Agarwal Jan 07 '15 at 14:34
@Oskar Eriksson from changing highcharts to highstock the only change is to add chartConfig.useHighStocks = true; ?? – patz Jul 21 '15 at 22:07

jolySoft · Answer 2 · 2015-06-25T09:00:33.507

0

You can use highcharts-ng and highstocks by including highstock-all.js. I believe this is also the standalone version of highstocks too (please correct me if I'm wrong) so happy days. The cost is 274Kb minified if you can live with that.

edited Jun 25 '15 at 09:00

answered Jun 25 '15 at 08:50

jolySoft

2,948
2
30
34

Using HighStocks with highcharts-ng

2 Answers2