+ 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 --save+ Alternatively 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]}} | +
+ 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 --save+ Alternatively 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]}} | +
| {{label}} | +
|---|
| {{data[$parent.$index][$index]}} | +