Beautiful, reactive, responsive charts for Angular.JS using Chart.js. Demo
bower install angular-chart.js --save
or copy the files from dist/. Then add the sources to your code (adjust paths as needed):
<script src="/bower_components/Chart.js/Chart.min.js"></script>
<script src="/bower_components/angular-chart.js/dist/angular-chart.js"></script>There are 6 types of charts so 6 directives: chart-line, chart-bar, chart-radar, chart-pie,
chart-polar-area, chart-doughnut.
They all use mostly the same API:
data: series datalabels: x axis labels (line, bar, radar) or series labels (pie, doughnut, polar area)options: chart options (as from Chart.js documentation)series: (default:[]): series labels (line, bar, radar)colours: data colours (will use default colours if not specified)getColour: function that returns a colour in case there are not enough (will use random colours if not specified)click: onclick event handler (line, radar)legend: (default:false): show legend below the chart
There is another directive chart-base that takes an extra attribute chart-type to define the type
dynamically.
For IE8 and older browsers, you will need to include excanvas. You will also need shims for ES5 functions.
<head>
<!--[if lt IE 9]><script src="excanvas.js"></script><![endif]-->
<!--[if lt IE 9]><script src="es5-shim.js"></script><![endif]-->
</head><canvas id="line" class="chart chart-line" data="data" labels="labels"
legend="true" series="series" click="onClick"></canvas> angular.module("app", ["chart.js"]).controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
// Simulate async data update
$timeout(function () {
$scope.data = [
[28, 48, 40, 19, 86, 27, 90],
[65, 59, 80, 81, 56, 55, 40]
];
}, 3000);
}]);angular-chart.js watch updates on data, series, labels, colours and options and will update, or destroy and recreate, the chart on changes.
angular-chart.js emits the following events on the scope and pass the chart as argument:
create: when chart is createdupdate: when chart is updated
$scope.$on('create', function (chart) {
console.log(chart);
});
Note: the event can be emitted multiple times for each chart as the chart can be destroyed and
created multiple times during angular watch lifecycle.
angular-chart.js listen to the scope destroy event and destroy the chart when it happens.
There are a set of 7 default colours. Colours can be replaced using the colours attribute.
If there is more data than colours, colours are generated randomly or can be provided
via a function through the getColour attribute.
Hex colours are converted to Chart.js colours automatically, including different shades for highlight, fill, stroke, etc.
Issues or feature requests for Chart.js (e.g. new chart type, new axis, etc.) need to be opened on Chart.js issues tracker
Open issues in github. Please add a link to a plunker, jsbin, or equivalent. Here is a jsbin template for convenience.
Pull requests welcome!
- Fork the repo
- Make your changes
- Run tests:
npm test - Submit pull request
Thank you!
- @ManuelRauber
- @vad710
- @JAAulde
- @offsky
- @jonathansampson
Jerome Touffe-Blin, @jtblin, About me
angular-chart.js is copyright 2014 Jerome Touffe-Blin and contributors. It is licensed under the BSD license. See the include LICENSE file for details.