Add Chart.js charts to your angular application
1 person uses it
Author: 919781?v=2 carlcraig


Build Status


Add Chart.js to your angular applications

tc-angular-chartjs provides you with directives for all chartjs chart types.

  • Line Charts
  • Bar Charts
  • Radar Charts
  • Polar Area Charts
  • Pie Charts
  • Doughnut Charts

You can see all the Chart.js Documentation on their website.


Grab the latest version of Chart.js and tc-angular-chartjs.

Load Chart.js and tc-angular-chartjs as you would with normal scripts.

Require tc.chartjs in your application modules where you require Chart.js.

Basic Usage

There are 6 different directives.

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

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 by assigning $scope variables to chart-options and chart-data attributes on the same canvas element.

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
  • radar
  • polararea
  • pie
  • doughnut

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.


  • 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.

comments powered by Disqus
This page was last updated about 4 years ago.