CODEWITHSUNDEEP
angularjschart.jsangular-chart
Haytham
Haytham

Reputation: 854

Change Angular js charts.js chart type dynamically

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?

Upvotes: 2

Views: 3558

Answers (1)

Vijay Venugopal Menon
Vijay Venugopal Menon

Reputation: 1520

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

Upvotes: 4

Related Questions