# angular-chart.js
[](http://badge.fury.io/bo/angular-chart.js)
[](http://badge.fury.io/js/angular-chart.js)
[](https://travis-ci.org/jtblin/angular-chart.js)
[](https://codeclimate.com/github/jtblin/angular-chart.js)
[](https://codeclimate.com/github/jtblin/angular-chart.js)
Beautiful, reactive, responsive charts for Angular.JS using [Chart.js](http://www.chartjs.org/).
[Demo](http://jtblin.github.io/angular-chart.js/)
# Chart.js 2.0
If you are interested by the upcoming 2.0 version of Chart.js, please checkout the
[chartjs-2.0 branch](https://github.com/jtblin/angular-chart.js/tree/chartjs-2.0). Report issues
and feedback for this version by opening issues prefixed by "chartjs-2.0" in the title.
See https://github.com/jtblin/angular-chart.js/issues/123 for more details and subscribe to it to get
the latest progress on Chart.js 2.0 integration.
# Installation
### bower
bower install --save angular-chart.js
### npm
npm install --save angular-chart.js
### cdn
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css
### manually
or copy the files from `dist/`.
Then add the sources to your code (adjust paths as needed) after
adding the dependencies for Angular and Chart.js first:
```html
...
```
# Utilisation
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 (`[chart-]` indicates an optional but recommended prefix):
- `[chart-]data`: series data
- `[chart-]labels`: x axis labels (line, bar, radar) or series labels (pie, doughnut, polar area)
- `[chart-]options`: chart options (as from [Chart.js documentation](http://www.chartjs.org/docs/))
- `[chart-]series`: (default: `[]`): series labels (line, bar, radar)
- `[chart-]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)
- `[chart-]click`: onclick event handler
- `[chart-]hover`: onmousemove event handler
- `[chart-]legend`: (default: `false`): show legend below the chart
*DEPRECATION WARNING*: Note that all attributes which do *not* use the `[chart-]` prefix are deprecated
and may be removed in a future version.
There is another directive `chart-base` that takes an extra attribute `chart-type` to define the type
dynamically, see [stacked bar example](http://jtblin.github.io/angular-chart.js/examples/stacked-bars.html).
# Example
## Markup
```html
```
## Javascript
```javascript
angular.module("app", ["chart.js"])
// Optional configuration
.config(['ChartJsProvider', function (ChartJsProvider) {
// Configure all charts
ChartJsProvider.setOptions({
colours: ['#FF5252', '#FF8A80'],
responsive: false
});
// Configure all line charts
ChartJsProvider.setOptions('Line', {
datasetFill: false
});
}])
.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);
}]);
```
## AMD RequireJS
See [a simple AMD example](examples/amd.js)
## CommonJS e.g. webpack
Module should work with CommonJS out of the box e.g. [browserify](http://browserify.org/) or
[webpack](http://webpack.github.io/), see a [webpack example](examples/webpack.config.js).
# Reactive
angular-chart.js watch updates on data, series, labels, colours and options and will update, or destroy and recreate,
the chart on changes.
# Events
angular-chart.js emits the following events on the `scope` and pass the chart as argument:
* `create`: when chart is created
* `update`: when chart is updated
```
$scope.$on('create', function (event, 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.
# Colours
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
**Issues or feature requests for Chart.js (e.g. new chart type, new axis, etc.) need to be opened on
[Chart.js issues tracker](https://github.com/nnnick/Chart.js/issues)**
**For general questions about usage, please use [http://stackoverflow.com/](http://stackoverflow.com/)**
Please check if issue exists first, otherwise open issue in [github](https://github.com/jtblin/angular-chart.js/issues).
**Ensure you add a link to a plunker, jsbin, or equivalent.**
Here is a [jsbin template](http://jsbin.com/dufibi/3/edit?html,js,output) for convenience.
## Browser compatibility
For IE8 and older browsers, you will need
to include [excanvas](https://code.google.com/p/explorercanvas/wiki/Instructions).
You will also need a [shim](https://github.com/es-shims/es5-shim) for ES5 functions.
You also need to have ```height``` and ```width``` attributes for the ```