angular-chart-lb.js v1.1.4
angular-chart-lb.js
Little adaptation of angular-chart.js wrapper angular-chart.js to reference chart-lb.js.
Installation
This is the 1.x
branch which requires Chart.js 2.x version. Following semantic versioning,
there are numerous breaking changes since 0.x, notably:
- all options now need to use the
chart-
prefix chart-colours
is nowchart-colors
andchart-get-colour
is nowchart-get-color
- chart types are in
camelCase
e.g.line
andpolarArea
- legend is now a Chart.js option so the
chart-legend
attribute has been removed - events emitted on creation and update are now prefixed with
chart-
e.g.chart-create
$scope.$apply
is not called anymore on mouse hover functions calls- obviously all Chart.js breaking changes as well in how options are set, etc.
- disabling the
responsive
option doesn't work via globalChart.defaults.global.responsive
anymore, 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
npm install --save angular-chart-lb.js
cdn
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min-lb.js
bower
bower install --save angular-chart-lb.js
Example
Markup
<canvas class="chart chart-line" chart-data="data" chart-labels="labels"
chart-series="series" chart-click="onClick"></canvas>
Javascript
angular.module("app", ["chart.js"])
// Optional configuration
.config(['ChartJsProvider', function (ChartJsProvider) {
// Configure all charts
ChartJsProvider.setOptions({
chartColors: ['#FF5252', '#FF8A80'],
responsive: false
});
// Configure all line charts
ChartJsProvider.setOptions('line', {
showLines: 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
CommonJS e.g. webpack
Module should work with CommonJS out of the box e.g. browserify or webpack, see a webpack example.
Reactive
angular-chart.js watch updates on data, series, labels, colors and options and will update, or destroy and recreate, the chart on changes.
Events
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.
Colors
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)".
Example - RGB Colors
angular.module('app',['chart.js'])
.controller('MainController', function($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.
Example - RGBA Colors
angular.module('app',['chart.js'])
.controller('MainController', function($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.
Example - input color as an object
angular.module('app',['chart.js'])
.controller('MainController', function($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];
});
Browser compatibility
For IE8 and older browsers, you will need to include excanvas. You will also need a shim for ES5 functions.
You also need to have height
and width
attributes for the <canvas>
tag of your chart
if using IE8 and older browsers. If you do not have these attributes, you will need a
getComputedStyle shim
and the line document.defaultView = window;
, but there still may be errors (due to code in Chart.js).
<head>
<!--[if lt IE 9]>
<script src="excanvas.js"></script>
<script src="es5-shim.js"></script>
<![endif]-->
</head>
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
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.
v0.x - Chart.js v1.x - deprecated
This is the deprecated version of angular-chart.js that uses the v1.x version of Chart.js. If you want to use this version, please checkout the chartjs-1.x branch
Contributing
Pull requests welcome!
See CONTRIBUTING.md.
Contributors
Thank you to the contributors!
License
It is licensed under the BSD license. See the include LICENSE file for details.