AngularJS directives for Chart.js
JavaScript HTML
Latest commit 48ba339 Oct 12, 2016 @carlcraig version 2.1.3
Failed to load latest commit information.
demo add horizontal bar Sep 4, 2016
dist add horizontal bar Sep 4, 2016
src add horizontal bar Sep 4, 2016
test cleanup Sep 4, 2016
.gitignore watch data and options Sep 4, 2016
.travis.yml fix npm install Oct 12, 2016
LICENSE-APACHE-2.0 added support for legends Sep 15, 2014
LICENSE-MIT added support for legends Sep 15, 2014 update example Sep 4, 2016
gulpfile.js cleanup Sep 4, 2016
package.json version 2.1.3 Oct 12, 2016


AngularJS directives for Chart.js

Build Status


Ensure you have installed Chart.js


npm install tc-angular-chartjs --save


Bower support has been dropped but you can still use tc-angular-chartjs with Bower using bower-npm-resolver.


You can download the source archive from the github releases page.

Just include dist/tc-angular-chartjs.js into your project.

Basic Usage

Add tc.chartjs to your modules dependencies e.g.

angular.module( 'app', ['tc.chartjs']);

You will then have access to the following directives:

  • tc-chartjs
  • tc-chartjs-line
  • tc-chartjs-bar
  • tc-chartjs-horizontalbar
  • tc-chartjs-radar
  • tc-chartjs-polararea
  • tc-chartjs-pie
  • tc-chartjs-doughnut
  • tc-chartjs-bubble

Just place one of these directives on a canvas element to create a Chart.js chart.

You will also want to give the chart some data and options. These can be provided via the chart-options and chart-data attributes.

For data structures and options please refer to Chart.js documentation

You can also handle chart clicks via the chart-click attribute.

Example Pie Chart

$scope.myData = {
  // Chart.js data structure goes here
  // e.g. Pie Chart Data Structure
  labels: [
  datasets: [
      data: [300, 50, 100],
      backgroundColor: [
      hoverBackgroundColor: [

$scope.myOptions =  {
  // Chart.js options go here
  // e.g. Pie Chart Options

$scope.onChartClick = function (event) {

For more examples please view the demo folder.

Using the tc-chartjs directive

When using the tc-chartjs directive you will need to add an additional attribute to say which type of chart should be created.

Just attach a chart-type="" attribute to the canvas element.


Available Types:

  • line
  • bar
  • horizontalbar
  • radar
  • polararea
  • pie
  • doughnut
  • bubble

Passing another value to chart-type than the above will try to create a chart of that type, which is useful if you have extended Chart.js with custom chart types, e.g. through plugins.


This library is built using gulp so ensure you have it installed.

To build the dist files run the following:

npm run build

To run the tests:

npm test

To watch files and rebuild dist when changes are made:

npm start


  • Open a Pull Request (PR)
  • Make sure your PR is on a new branch you created from the latest version of master branch
  • Please do not open a PR from your master branch
  • Open a PR even if your code is incomplete to start a discussion and to collect feedback
  • Please make sure all unit tests pass, and add new tests for any added features.


tc-angular-chartjs is dual licensed with the Apache-2.0 or MIT license.

See LICENSE-APACHE-2.0 and LICENSE-MIT for more details.