Change Angular js charts.js chart type dynamically

Question

everyone , Am using Angular js 1.6 and angular Chart [of chart.js] am trying to to change the type of the chart when changing the value of a HTML select input like the following but the chart type doesnt change . i found out in some FAQ that the chart needs to be destroyed and recreated again but that doesn't work with the angular version . This is my code:

The view:

 <select ng-change="changeChartType(selectedType)" ng-model="selectedType" >
            <option ng-repeat="t in chartType" value={{t.type}}>{{t.dispName}}</option>
      </select>
      <p>{{selectedType}}</p>

    <div id="chartContainer">
    <canvas id="doughnut" class={{selectedType}}
    chart-data="data" chart-labels="labels">
    </canvas> 
    </div>

when I use this code the class changes for example from "chart chart-pie" to "chart chart-doughnut", but the chart itself doesnt change.

Am I missing something?

You have to destroy and redraw your chart when type change. You can inspire your redraw with this post: stackoverflow.com/questions/40056555/… — Zooly
– Zooly, Commented Oct 30, 2017 at 22:32

Vijay Venugopal Menon · Accepted Answer · 2017-10-30 22:48:46Z

4

You have to use the "chart-type" directive to change the chart type dynamically. They already provide it out of the box.

Check this plunker: http://plnkr.co/edit/xKrCCcEQpzEvxfUMJKzd?p=preview

    <canvas id="bar" class="chart-base" chart-type="selectedType"
  chart-data="data" chart-labels="labels"> chart-series="series"
</canvas>

Reference : http://jtblin.github.io/angular-chart.js/#base-chart (search for "dynamic chart")

answered Oct 30, 2017 at 22:48

Vijay Venugopal Menon

1,5301 gold badge14 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Change Angular js charts.js chart type dynamically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related