Search code examples
angularjshighchartshighcharts-ngangular2-highcharts

$("#highcharts-2i5ujpv-2").highcharts() is undefined

I have an AngularJS application in which I am using highcharts-ng version 0.0.86. I am generating the highchart by the following code

<highchart config="highchartsNg"></highchart>

The chart gets properly generated with this dynamic id "highcharts-2i5ujpv-2"

But whenever I type $("#highcharts-2i5ujpv-2").highcharts() in the browser console, it gives me undefined.

Also, I have other charts in my app for which I am creating the chart using jQuery inside a div container and it works fine. eg

<div id="multi-chart-container"></div>
$("#multi-chart-container").highcharts(chartconfig);

I need to understand why I does it give me undefined in the first case

Thanks in advance

Solution

  • Highcharts creates it's own div element with dynamic id. You need to get one level higher to get the chart:

    $("#highcharts-2i5ujpv-2").parent().highcharts()

    Live demo: http://jsfiddle.net/BlackLabel/5eq6yhg3/