Search Posts

Category: components

Dynamically set chart type with AngularJS and chart.js

I want to write an AngularJS component which uses a template and a controller to display a chart.js chart that has a dynamic type (bar, line, pie, …) I use angular-chart.js to combine angular and chart.js My template looks like this: <div class=”card”> <div class=”card-body”> <h4 class=”card-title”>{{$ctrl.name}}</h4> Type is set to: {{$ctrl.type ? $ctrl.type : ‘pie’}} <div id=”container” class=”container” style=”width:100%”> <div class=”panel-body”> <canvas id=”chart_test” class=”chart chart-{{$ctrl.type ? $ctrl.type : ‘pie’}}” chart-data=”data” chart-labels=”labels” chart-series=”series” chart-options=”options” chart-dataset-override=”datasetOverride”></canvas> […]