[Chartjs]-Use of ng-class with Chart.js

by

2👍

✅

The way to fix this, is to choose the class:

class="chart-base"

And then, pass the type you want in a variable, to the attribute “chart-type”:

chart-type="type"

You can choose one of the following types: Line, Bar, Radar, PolarArea, Pie, Doughnut.

Thanks to @PankajParkar for some of the help!

1👍

If you current element is inside ng-repeat/ng-if then type inside your content & type inside controller will be different.

I’d say do it on HTML it self, if its simple operation

ng-class="'chart chart-'+ type"

Update

In order to use chart in which you can change the type dynamically, you must set the class to this:

class="chart-base"

After this, you need to specify a chart-type attribute with scope value/expression(this line will read up value & place watch over that value by this line, so that it will ensure chart will get re-draw on type change). When type value get changed it will automatically re render chart with correct type. Chart re-rendering needs it and the class-base. This would be a working example:

<canvas id="grafico" class="chart-base" chart-type="type"
    chart-data="data" chart-labels="labels">
</canvas>

Below are the valid chart type which you can use (took it from here)

.directive('chartBase', function (ChartJsFactory) { return new ChartJsFactory(); })
.directive('chartLine', function (ChartJsFactory) { return new ChartJsFactory('Line'); })
.directive('chartBar', function (ChartJsFactory) { return new ChartJsFactory('Bar'); })
.directive('chartRadar', function (ChartJsFactory) { return new ChartJsFactory('Radar'); })
.directive('chartDoughnut', function (ChartJsFactory) { return new ChartJsFactory('Doughnut'); })
.directive('chartPie', function (ChartJsFactory) { return new ChartJsFactory('Pie'); })
.directive('chartPolarArea', function (ChartJsFactory) { return new ChartJsFactory('PolarArea'); });

So type value can be Line, Bar, Radar, PolarArea, Pie, Doughnut.

Leave a comment