Beautiful, reactive, responsive charts for Angular.JS using Chart.js.
Have a look at the demo site to see examples with detailed markup, script and options.
This is the 2.x branch which requires Chart.js 2.x version and AngularJS 1.8.x.
This version drops support for legacy browsers (IE11 and below) and uses ES6 syntax.
Following semantic versioning, there are numerous breaking changes since 1.x, notably:
-
ES6 Baseline: The library and examples now use ES6 features (arrow functions,
const/let, etc.). -
Dropped IE Support: Support for IE11 and below has been removed.
-
all options now need to use the
chart-prefix -
chart-coloursis nowchart-colorsandchart-get-colouris nowchart-get-color -
chart types are in
camelCasee.g.lineandpolarArea -
legend is now a Chart.js option so the
chart-legendattribute has been removed -
events emitted on creation and update are now prefixed with
chart-e.g.chart-create -
$scope.$applyis not called anymore on mouse hover functions calls -
obviously all Chart.js breaking changes as well in how options are set, etc.
-
disabling the
responsiveoption doesn't work via globalChart.defaults.global.responsiveanymore, but must be set via standard options e.g.ChartJsProvider.setOptions({ responsive: false }); -
factory now returns a module name instead of a module instance
npm install --save angular-chart.js
https://cdn.jsdelivr.net/npm/angular-chart.js@latest/dist/angular-chart.min.js
If you are using a modern bundler like Vite, Webpack 5, or Rollup:
import angular from 'angular';
import Chart from 'chart.js';
import angularChart from 'angular-chart.js';
angular.module('app', [angularChart]);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:
<head>
...
<head>
<body>
...
</body>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/chart.js/dist/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>There are 8 types of charts so 8 directives: chart-line, chart-bar, chart-horizontal-bar, chart-radar,
chart-pie, chart-polar-area, chart-doughnut, chart-bubble.
Here are the options for all directives:
chart-data: series datachart-labels: x axis labels (line, bar, horizontal bar, radar, bubble) or series labels (pie, doughnut, polar area)chart-options: chart options (as from Chart.js documentation)chart-series: (default:[]): series labels (line, bar, radar)chart-colors: data colors (will use default colors if not specified)chart-get-color: function that returns a color in case there are not enough (will use random colors if not specified)chart-click: onclick event handlerchart-hover: onmousemove event handlerchart-dataset-override: override individual datasets to allow per dataset configuration e.g. y-axis, mixed type chartchart-plugins: (default:[]): array of Chart.js pluginschart-display-when-no-data: (default:false): whether to create the chart even if data is empty or undefinedchart-force-update: (default:false): whether to force a chart update even if data references have not changed
There is another directive chart-base that takes an extra attribute chart-type to define the type
dynamically.
You can create mixed type chart using the chart-dataset-override, see
bar-line example.
See also stacked bar example.
<canvas class="chart chart-line" chart-data="data" chart-labels="labels"
chart-series="series" chart-click="onClick"></canvas> angular.module("app", ["chart.js"])
// Optional configuration
.config(['ChartJsProvider', (ChartJsProvider) => {
// Configure all charts
ChartJsProvider.setOptions({
chartColors: ['#FF5252', '#FF8A80'],
responsive: false,
});
// Configure all line charts
ChartJsProvider.setOptions('line', {
showLines: false,
});
}])
.controller('LineCtrl', ['$scope', '$timeout', ($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 = (points, evt) => {
console.log(points, evt);
};
// Simulate async data update
$timeout(() => {
$scope.data = [
[28, 48, 40, 19, 86, 27, 90],
[65, 59, 80, 81, 56, 55, 40],
];
}, 3000);
}]);Module should work with CommonJS out of the box e.g. browserify or webpack, see a webpack example.
angular-chart.js watch updates on data, series, labels, colors and options and will update, or destroy and recreate, the chart on changes.
Note: Updates to chart-options are now performed non-destructively using chart.update(), which provides smoother transitions when changing configuration dynamically.
angular-chart.js listens to the following events on the scope and acts accordingly:
$destroy: call.destroy()on the chart$resize: call.resize()on the chart
angular-chart.js emits the following events on the scope and pass the chart as argument:
chart-create: when chart is createdchart-update: when chart is updatedchart-destroy: when chart is destroyed
$scope.$on('chart-create', function (evt, 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 listens to the scope $destroy event and destroys the chart when it happens.
There are a set of 7 default colors. Colors can be replaced using the colors attribute.
If there is more data than colors, colors are generated randomly or can be provided
via a function through the getColor attribute.
Hex colors are converted to Chart.js colors automatically, including different shades for highlight, fill, stroke, etc.
RGB colors may be input by using a string in the format "rgb(r,g,b)".
angular.module('app', ['chart.js'])
.controller('MainController', ($scope) => {
$scope.colors = ['rgb(159,204,0)', 'rgb(250,109,33)', 'rgb(154,154,154)'];
$scope.labels = ['Green', 'Orange', 'Grey'];
$scope.data = [300, 500, 100];
});
RGBA colors may also be input by using a string in the format "rgba(r,g,b,a)". They may be used alongside RGB colors and/or Hex colors.
angular.module('app', ['chart.js'])
.controller('MainController', ($scope) => {
$scope.colors = [
'rgba(159,204,0,0.5)', 'rgba(250,109,33,0.7)', 'rgba(154,154,154,0.5)',
];
$scope.labels = ['Green', 'Orange', 'Grey'];
$scope.data = [300, 500, 100];
});
Colors may also be input as an object by using the format in the example below. Colors input as objects, Hex colors, RGB, and RGBA colors may be mixed and matched.
angular.module('app', ['chart.js'])
.controller('MainController', ($scope) => {
$scope.colors = [
{
backgroundColor: 'rgba(159,204,0, 0.2)',
pointBackgroundColor: 'rgba(159,204,0, 1)',
pointHoverBackgroundColor: 'rgba(159,204,0, 0.8)',
borderColor: 'rgba(159,204,0, 1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(159,204,0, 1)',
},
'rgba(250,109,33,0.5)',
'#9a9a9a',
'rgb(233,177,69)',
];
$scope.labels = ['Green', 'Peach', 'Grey', 'Orange'];
$scope.data = [300, 500, 100, 150];
});
Issues or feature requests for Chart.js (e.g. new chart type, new axis, etc.) need to be opened on Chart.js issues tracker
For general questions about usage, please use http://stackoverflow.com/
Please check if issue exists first, otherwise open issue in github. Ensure you add a link to a plunker, jsbin, or equivalent.
Here is a jsbin template for convenience.
Pull requests welcome!
See CONTRIBUTING.md.
This project uses Rollup for bundling and Gulp for task automation.
The source code is located in src/ and uses native ES Modules.
To start the development server with live reload:
npm run devThis will:
- Start a local server at
http://localhost:8045. - Watch
src/for changes and rebuild thedist/files instantly. - Automatically reload the browser when changes are detected.
To generate the production bundles in dist/:
npm run buildTo run the linter:
npm run lintTo automatically fix some linting issues:
npm run lint -- --fixTo run the unit tests:
npm testThank you to the contributors!
Jerome Touffe-Blin, @jtblin, About me
angular-chart.js is copyright 2016-2026 Jerome Touffe-Blin and contributors. It is licensed under the BSD license. See the include LICENSE file for details.