This repository contains a set of native AngularJS directives for Chart.js. The only required dependencies are:
The easiest is to download with bower:
bower install angular-chart.js --saveAlternatively files can be downloaded downloaded from Github.
Whichever method you choose the good news is that the overall size is very small: <5kb for all directives (~1kb with gzip compression!)
<script src="bower_components/dist/angular-chart.js"></script>As soon as you've got all the files downloaded and included in your page you just need to declare
a dependency on the chart.js module:
angular.module('myModule', ['chart.js']);You need to include a link to the css file in your page.
<link rel="stylesheet" href="bower_components/dist/angular-chart.css">Series have beautiful pre-sets colours (to a maximum of 7 series, after that colours will be randomly generated).
They can be overwritten using Chart.defaults.global.colours.
.chart-line
data: series datalabels: x axis labelslegend (default: false): show legend below the chartoptions (default: {}): Chart.js optionsseries (default: []): series labelsclick (optional): onclick event handlercolours (default to global colours): colours for the chart<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", function ($scope) {
$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);
};
});
.chart-bar
data: series datalabels: x axis labelslegend (default: false): show legend below the chartoptions (default: {}): Chart.js optionsseries (default: []): series labelscolours (default to global colours): colours for the chart<canvas id="bar" class="chart chart-bar" data="data"
labels="labels"></canvas> angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
});
.chart-doughnut
data: series datalabels: series labelslegend (default: false): show legend below the chartoptions (default: {}): Chart.js optionscolours (default to global colours): colours for the chart<canvas id="doughnut" class="chart chart-doughnut" data="data"
labels="labels"></canvas> angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
$scope.data = [300, 500, 100];
});
.chart-radar
data: series datalabels: series labelslegend (default: false): show legend below the chartoptions (default: {}): Chart.js optionsseries (default: []): series labelsclick (optional): onclick event handlercolours (default to global colours): colours for the chart<canvas id="radar" class="chart chart-radar" data="data"
labels="labels"></canvas> angular.module("app", ["chart.js"]).controller("RadarCtrl", function ($scope) {
$scope.labels =["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];
$scope.data = [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 96, 27, 100]
];
});
.chart-pie
data: series datalabels: series labelslegend (default: false): show legend below the chartoptions (default: {}): Chart.js optionscolours (default to global colours): colours for the chart<canvas id="pie" class="chart chart-pie" data="data"
labels="labels"></canvas> angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
$scope.data = [300, 500, 100];
});
.chart-polar-area
data: series datalabels: series labelslegend (default: false): show legend below the chartoptions (default: {}): Chart.js optionscolours (default to global colours): colours for the chart<canvas id="polar-area" class="chart chart-polar-area" data="data"
labels="labels"></canvas> angular.module("app", ["chart.js"]).controller("PolarAreaCtrl", function ($scope) {
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
$scope.data = [300, 500, 100, 40, 120];
});
.chart-base
chart-type: chart type e.g. Bar, PolarArea, etc. or other plugins<canvas id="base" class="chart-base" chart-type="type" data="data"
labels="labels" legend="true"></canvas> angular.module("app", ["chart.js"]).controller("BaseCtrl",
function ($scope) {
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
$scope.data = [300, 500, 100, 40, 120];
$scope.type = 'PolarArea';
$scope.toggle = function () {
$scope.type = $scope.type === 'PolarArea' ?
'Pie' : 'PolarArea';
};
});
All charts are reactive and will update automatically when data changes.
| {{label}} |
|---|
| {{data[$parent.$index][$index]}} |