highcharts-ng: Equivalent of $('#container').highcharts()

Question

I have created the chart's config in my controller like this:

$scope.ohlcChartConfig = {            
        options: {.......

like the way it is done in HighCharts-ng(angularJS directive of HighCharts).

I want the equivalent of the following :

var chart = $('#container').highcharts();

So that I am able to call the following methods in highcharts-ng:

var svg = chart.getSVG();
chart.xAxis[0].addPlotBand({...})
chart.xAxis[0].removePlotBand('plot-id');

Currently, I have tried to do it like this:

var chart= $scope.ohlcChartConfig;

But when I call the methods, I get the error 'undefined is not a function'.

Here is a very simplified JSFiddle where I am trying to get the charts object and call methods on it.

Thanks in advance.

Answer 1

Just looked into sources on highcharts-ng - variable chart isn't returned anywhere, so you don't have access to methods directly from Highcharts API.

However, you can simply workaround this:

var chart = Highcharts.charts[0];

Highcharts.charts array contains all charts on a page. See simple demo: http://jsfiddle.net/fxGq4/2/

Note: When using getSVG() method, created is new chart in a background, so Highcharts.charts array will get more charts, or undefined when chart is destroyed.

Also, don't forget to add exporting.js file! Url: http://code.highcharts.com/exporting.js.