Use Chart.js in AngularJS

Posted: 2016-08-11, Modified: 2016-11-25   AngularJS Chartjs
Copyright certificate by blockai

Angular Chart

This entry explains how to use Chart.js in AngularJS. The answer is simple and use Angular Chart.

To add a chart in your application, you need to add a canvas element with chart class and a class depended on chart type you want to add. Suppose we are adding a bar chart in an application, for example, we need to add a canvas element with class="chart chart-bar".

In Angular Chart, data to be plotted are given through chart-data, chart-labels, chart-series, and chart-dataset-override elements. This design is little bit different from one of original Chart.js.

chart-data attribute is associated with data.datasets in Chart.js, but it only takes a list or 2-dimensions list, although data.datasets takes a more complex object, including labels, color information, etc. Here is an example object in Chart.js:

datasets: [{
  label: '# of Votes',
  data: [12, 19, 3, 5, 2, 3],
  backgroundColor: [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)'
  ],
  borderColor: [
    'rgba(255,99,132,1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)'
  ],
  borderWidth: 1
},
...
]

In Angular Chart, the data given to chart-data attribute must consist of only data attribute in the above object, i.e. the constructor of our controller is

class GraphCtrl{
  constructor() {
    this.data = [
      [12, 19, 3, 5, 2, 3],
      ...
    ];
  }
}

and our template is <canvas class="chart chart-bar" chart-data="$ctrl.data" />.

Label information is given through chart-series attribute, and the attribute takes a list consists of label names.

The other information such as backgroundColor, borderColor, borderWidth, etc. is given through chart-dataset-override attribute. This attribute takes as same object as one in Chart.js without data and label attributes.

Note that, chart-data attribute is required and you shouldn’t give data through chart-dataset-override attaribute.

Example

In this example, we’ll convert a bar chart example given in Chart.js’s document for Angular Chart.

Chart.js version

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

Angular Chart version

chart.js

class ChartCtrl{

  constructor(){

    this.labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
    this.data = [
      [12, 19, 3, 5, 2, 3]
    ];
    this.seriese = ["# of Votes"];
    this.datasets = [
      {
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }
    ];
    this.options = {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    };

  }

}

chart.html

<canvas class="chart chart-bar"
  chart-data="$ctrl.data"
  chart-labels="$ctrl.labels"
  chart-series="$ctrl.seriese"
  chart-dataset-override="$ctrl.datasets"
  chart-options="$ctrl.options"
/>

If datasets has only one sequence as the above example, data and datasets shouldn’t be lists. But, in this case, chart-series attribute will be ignored, and don’t forget to add label: "# of Votes" attribute.

this.data = [12, 19, 3, 5, 2, 3];
this.datasets = {
  label: "# of Votes",
  backgroundColor: [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)'
  ],
  borderColor: [
    'rgba(255,99,132,1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)'
  ],
  borderWidth: 1
};