CODEWITHSUNDEEP
javascriptangularjshighchartsangularjs-directive
CloudStrife91
CloudStrife91

Reputation: 35

Rendering more than one chart with Highcharts using Angular js Directives

i'm having an issue while trying to render more than one chart with Highcharts and AngularJS.

My code is based on this fiddle: http://jsfiddle.net/csTzc/

I basically just duplicated the div where the chart is rendered: http://jsfiddle.net/CloudStrife91/b4vpP/

<div class="hc-pie" items="ideas"></div>
<div class="hc-pie" items="ideas2"></div>

As you can see the second chart is not displayed instead there is the template div that says "not working"

Thank you very much for the help!

Upvotes: 1

Views: 2115

Answers (1)

JoseM
JoseM

Reputation: 4302

You need to change how you provide the element in the renderTo of HighCharts.

Change 

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: "container",
      ...
    },
    ... 
  });

To

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: element[0],
      ...
    },
    ... 
  });

You should also remove the id="container" part from the template, you don't need it there and like I mentioned in my comment, it is invalid html to have more than element with the same id.

Here is an updated fiddle

Upvotes: 3

Related Questions