How to get chartjs column chart in ng-repeat

by

👍:0

You just need to use the angularjs library for chart.js, please checkout angular-chart.js. For an example of it in action, please refer the below example!

<div class="container" ng-app="app" ng-controller="ChartCtrl">
  <div class="row" ng-repeat="item in repeat">
    <div class="col-md-6">
      <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride">
      </canvas>
    </div>
    <div class="col-md-6">
      <canvas id="bar" class="chart chart-bar" chart-data="data1" chart-labels="labels1" chart-series="series1">
      </canvas>
    </div>
  </div>
</div>

We can just use a ng-repeat and inside we have our chart definitions. This is a very basic example, please let me know if you face any issues implementing!

DEMO:

JSFiddle Demo

Leave a comment