Awesome
tc-angular-chartjs
AngularJS directives for Chart.js
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
, options
and plugins
. These can be provided via the chart-options
, chart-data
and chart-plugins
attributes.
For data structures, options and inline plugins 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-plugins="myPlugins"
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.myPlugins = [{
// Chart.js inline plugins go here
// e.g. http://www.chartjs.org/docs/latest/developers/plugins.html#using-plugins
}];
$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"
></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 test
To watch files and rebuild dist
when changes are made:
npm start
Contributing
- 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.
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.