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!

The first thing that I immediately notice is that you are re-using the id="container". There is only supposed to be one element on a page with the same id. — JoseM
– JoseM, Commented May 14, 2014 at 14:54

JoseM · Accepted Answer · 2014-05-14 15:02:21Z

3

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

answered May 14, 2014 at 15:02

JoseM

4,3022 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rendering more than one chart with Highcharts using Angular js Directives

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related