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: https://stackoverflow.com/questions/40056555/destroy-chart-js-bar-graph-to-redraw-other-graph-in-same-canvas/40058876 — Zooly, Oct 30 '17 at 22:32

score 4 · Accepted Answer · answered Oct 30 '17 at 22:48

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")

Change Angular js charts.js chart type dynamically

1 Answers1