Use of ng-class with Chart.js

Question

I'm using the angular-charts module, which is based on Charts.js. It works pretty great, but now I'm trying to change my app in a way I can select many options from a combobox, so the chart gets recompiled and refreshed to the new type of chart I want.

I tried using ng-class for this purpose, but it somehow doesn't work (the chart just never gets compiled; the DOM element is there but you don't actually see anything).

This is my chart and my selector:

<div class="main-chart" ng-show="showChart" ng-cloak>
    <span class="label title">{{title}}</span>
    <canvas id="grafico" ng-class="chartclass"
    chart-data="data" chart-labels="labels">
    </canvas>
    <select name="typeSelector" id="chartType" class="form-control" ng-model="type" ng-change="changeChart()">
        <option ng-selected="true" value="doughnut">Circle</option>
        <option value="bars">Bars</option>
    </select>
</div>

These are the parts involved from my controller, the two variables (one for the selector and one for the chart class), and the function that changes the class after a click is performed:

$scope.type = "";
$scope.chartclass = "chart chart-doughnut";

$scope.changeChart = function(){

    $scope.chartclass = "chart chart-"+$scope.type;
}

The class name gets properly changed, but I just don't see anything. Maybe I have to call to a $compile function, use a custom directive with a link, or something? I'm pretty much new in Angular so I would love to see a good suggestion!

Thanks!

EDIT: Let me repeat: the class name gets properly changed! The problem isn't about changing the class name, which works, the problem is with the actual chart showing off. It keeps hidden, like if it never was compiled.

EDIT 2: Check it out in these images. First image shows the normal working with "class" attribute, second one shows what we're trying, which is selecting the class name dynamically (with ng-class). As I said, the DOM gets correctly changed, so the class name is ok! The problem is, that somehow it just doesn't show the chart:

http://imgur.com/a/SJbzg

EDIT 3: This is what I currently have:

Simple variable declaration on the controller, initialized for showing the Doughnut chart type:

$scope.chartType = "Doughnut";

Here, the DOM:

<div class="main-chart" ng-show="showChart" ng-cloak>
    <span class="label title">{{title}}</span>
<canvas id="grafico" chart-type="chartType"
    chart-data="data" chart-labels="labels">
</canvas>
    <select name="typeSelector" id="typeOfChart" class="form-control" ng-model="chartType">
        <option ng-selected="true" value="Doughnut">Circle</option>
        <option value="Bar">Bars</option>
    </select>
</div>

What am I doing wrong? Why the chart never gets rendered?

Answer 1

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!

Answer 2

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 .