Rendering more than one chart with Highcharts using Angular js Directives

Question

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!

Answer 1

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