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 from Github or via npm. See readme for more information.
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/angular-chart.js/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/angular-chart.js/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.
You can also use the provider: ChartJsProvider in a .config()
(function (ChartJsProvider) {
ChartJsProvider.setOptions({ colours : [ '#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'] });
}); .chart-line
chart-data: series datachart-labels: x axis labelschart-legend (default: false): show legend below the chartchart-options (default: {}): Chart.js optionschart-series (default: []): series labelschart-click (optional): onclick event handlerchart-hover (optional): onmousemove event handlerchart-colours (default to global colours): colours for the chart<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-legend="true" chart-series="series"
chart-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
chart-data: series datachart-labels: x axis labelschart-legend (default: false): show legend below the chartchart-options (default: {}): Chart.js optionschart-series (default: []): series labelschart-click (optional): onclick event handlerchart-hover (optional): onmousemove event handlerchart-colours (default to global colours): colours for the chart<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels"> chart-series="series"
</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
chart-data: series datachart-labels: series labelschart-legend (default: false): show legend below the chartchart-options (default: {}): Chart.js optionschart-click (optional): onclick event handlerchart-hover (optional): onmousemove event handlerchart-colours (default to global colours): colours for the chart<canvas id="doughnut" class="chart chart-doughnut"
chart-data="data" chart-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
chart-data: series datachart-labels: series labelschart-legend (default: false): show legend below the chartchart-options (default: {}): Chart.js optionschart-series (default: []): series labelschart-click (optional): onclick event handlerchart-hover (optional): onmousemove event handlerchart-colours (default to global colours): colours for the chart<canvas id="radar" class="chart chart-radar"
chart-data="data" chart-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
chart-data: series datachart-labels: series labelschart-legend (default: false): show legend below the chartchart-options (default: {}): Chart.js optionschart-click (optional): onclick event handlerchart-hover (optional): onmousemove event handlerchart-colours (default to global colours): colours for the chart<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-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
chart-data: series datachart-labels: series labelschart-legend (default: false): show legend below the chartchart-options (default: {}): Chart.js optionschart-click (optional): onclick event handlerchart-hover (optional): onmousemove event handlerchart-colours (default to global colours): colours for the chart<canvas id="polar-area" class="chart chart-polar-area"
chart-data="data" chart-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"
chart-data="data" chart-labels="labels" chart-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]}} |