---

Installation

Ensure you have installed Chart.js

npm

npm install tc-angular-chartjs --save

bower

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

download

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

<canvas
tc-chartjs-pie
chart-data="myData"
chart-options="myOptions"
chart-click="onChartClick(event)"
></canvas>

$scope.myData = {
  // Chart.js data structure goes here
  // e.g. Pie Chart Data Structure http://www.chartjs.org/docs/#doughnut-pie-chart-data-structure
  labels: [
    "Red",
    "Blue",
    "Yellow"
  ],
  datasets: [
    {
      data: [300, 50, 100],
      backgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ]
    }
  ]
};

$scope.myOptions =  {
  // Chart.js options go here
  // e.g. Pie Chart Options http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options
};

$scope.onChartClick = function (event) {
  console.log(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.

<canvas
tc-chartjs
chart-type="doughnut"
chart-data="myData"
chart-options="myOptions"
chart-click="onChartClick(event)"
></canvas>

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.

---

Developing

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 run test

To watch files and rebuild dist when changes are made: npm start

---

License

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.