BranchesTags

Repository files navigation

angular-chart.js

Bower versionnpm versionBuild StatusCode ClimateCode Coverage

Beautiful, reactive, responsive charts for Angular.JS using Chart.js.

Demo

Chart.js 2.0

If you are interested by the upcoming 2.0 version of Chart.js, please checkout the chartjs-2.0 branch. Report issues and feedback for this version by opening issues prefixed by "chartjs-2.0" in the title.

See jtblin#123 for more details and subscribe to it to get the latest progress on Chart.js 2.0 integration.

Installation

bower

bower install --save angular-chart.js

npm

npm install --save angular-chart.js

cdn

//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css

manually

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><linkrel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css" /><head><body>
...
</body><scriptsrc="bower_components/angular/angular.min.js"></script><scriptsrc="bower_components/Chart.js/Chart.min.js"></script><scriptsrc="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>

Utilisation

There are 6 types of charts so 6 directives: chart-line, chart-bar, chart-radar, chart-pie, chart-polar-area, chart-doughnut.

They all use mostly the same API ([chart-] indicates an optional but recommended prefix):

  • [chart-]data: series data
  • [chart-]labels: x axis labels (line, bar, radar) 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-]colours: data colours (will use default colours if not specified)
  • getColour: function that returns a colour in case there are not enough (will use random colours if not specified)
  • [chart-]click: onclick event handler
  • [chart-]hover: onmousemove event handler
  • [chart-]legend: (default: false): show legend below the chart

DEPRECATION WARNING: Note that all attributes which do not use the [chart-] prefix are deprecated and may be removed in a future version.

There is another directive chart-base that takes an extra attribute chart-type to define the type dynamically, see stacked bar example.

Example

Markup

<canvasid="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-click="onClick"></canvas>

Javascript

angular.module("app",["chart.js"])// Optional configuration.config(['ChartJsProvider',function(ChartJsProvider){// Configure all chartsChartJsProvider.setOptions({colours: ['#FF5252','#FF8A80'],responsive: false});// Configure all line chartsChartJsProvider.setOptions('Line',{datasetFill: 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

See a simple AMD example

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, colours and options and will update, or destroy and recreate, the chart on changes.

Events

angular-chart.js emits the following events on the scope and pass the chart as argument:

  • create: when chart is created
  • update: when chart is updated
  • destroy: when chart is destroyed
$scope.$on('create', function (event, 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 listen to the scope destroy event and destroy the chart when it happens.

Colours

There are a set of 7 default colours. Colours can be replaced using the colours attribute. If there is more data than colours, colours are generated randomly or can be provided via a function through the getColour attribute.

Hex colours are converted to Chart.js colours automatically, including different shades for highlight, fill, stroke, etc.

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.

Contributing

Pull requests welcome!

See CONTRIBUTING.md.

Contributors

Thank you to the contributors!

Author

Jerome Touffe-Blin, @jtblin, About me

License

angular-chart.js is copyright 2015 Jerome Touffe-Blin and contributors. It is licensed under the BSD license. See the include LICENSE file for details.

About

Reactive, responsive, beautiful charts for AngularJS using Chart.js: http://jtblin.github.io/angular-chart.js

Resources

Readme
License

Contributing

Contributing
Activity
Custom properties

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
angular-chart.js
Bower versionnpm versionBuild StatusCode ClimateCode Coverage
Beautiful, reactive, responsive charts for Angular.JS using Chart.js.
Demo
Chart.js 2.0
If you are interested by the upcoming 2.0 version of Chart.js, please checkout the
chartjs-2.0 branch. Report issues
and feedback for this version by opening issues prefixed by "chartjs-2.0" in the title.
See jtblin#123 for more details and subscribe to it to get
the latest progress on Chart.js 2.0 integration.
Installation
bower
bower install --save angular-chart.js

npm
npm install --save angular-chart.js

cdn
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css

manually
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><linkrel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css" /><head><body>
...
</body><scriptsrc="bower_components/angular/angular.min.js"></script><scriptsrc="bower_components/Chart.js/Chart.min.js"></script><scriptsrc="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
Utilisation
There are 6 types of charts so 6 directives: chart-line, chart-bar, chart-radar, chart-pie,
chart-polar-area, chart-doughnut.
They all use mostly the same API ([chart-] indicates an optional but recommended prefix):
  • [chart-]data: series data
  • [chart-]labels: x axis labels (line, bar, radar) 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-]colours: data colours (will use default colours if not specified)
  • getColour: function that returns a colour in case there are not enough (will use random colours if not specified)
  • [chart-]click: onclick event handler
  • [chart-]hover: onmousemove event handler
  • [chart-]legend: (default: false): show legend below the chart
DEPRECATION WARNING: Note that all attributes which do not use the [chart-] prefix are deprecated
and may be removed in a future version.
There is another directive chart-base that takes an extra attribute chart-type to define the type
dynamically, see stacked bar example.
Example
Markup
<canvasid="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-click="onClick"></canvas>
Javascript
angular.module("app",["chart.js"])// Optional configuration.config(['ChartJsProvider',function(ChartJsProvider){// Configure all chartsChartJsProvider.setOptions({colours: ['#FF5252','#FF8A80'],responsive: false});// Configure all line chartsChartJsProvider.setOptions('Line',{datasetFill: 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
See a simple AMD example
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, colours and options and will update, or destroy and recreate,
the chart on changes.
Events
angular-chart.js emits the following events on the scope and pass the chart as argument:
  • create: when chart is created
  • update: when chart is updated
  • destroy: when chart is destroyed
$scope.$on('create', function (event, 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 listen to the scope destroy event and destroy the chart when it happens.
Colours
There are a set of 7 default colours. Colours can be replaced using the colours attribute.
If there is more data than colours, colours are generated randomly or can be provided
via a function through the getColour attribute.
Hex colours are converted to Chart.js colours automatically,
including different shades for highlight, fill, stroke, etc.
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.
Contributing
Pull requests welcome!
See CONTRIBUTING.md.
Contributors
Thank you to the contributors!
Author
Jerome Touffe-Blin, @jtblin, About me
License
angular-chart.js is copyright 2015 Jerome Touffe-Blin and contributors.
It is licensed under the BSD license. See the include LICENSE file for details.
About
Reactive, responsive, beautiful charts for AngularJS using Chart.js: http://jtblin.github.io/angular-chart.js
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
angular-chart.js
Bower versionnpm versionBuild StatusCode ClimateCode Coverage
Beautiful, reactive, responsive charts for Angular.JS using Chart.js.
Demo
Chart.js 2.0
If you are interested by the upcoming 2.0 version of Chart.js, please checkout the
chartjs-2.0 branch. Report issues
and feedback for this version by opening issues prefixed by "chartjs-2.0" in the title.
See jtblin#123 for more details and subscribe to it to get
the latest progress on Chart.js 2.0 integration.
Installation
bower
bower install --save angular-chart.js

npm
npm install --save angular-chart.js

cdn
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css

manually
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><linkrel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css" /><head><body>
...
</body><scriptsrc="bower_components/angular/angular.min.js"></script><scriptsrc="bower_components/Chart.js/Chart.min.js"></script><scriptsrc="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
Utilisation
There are 6 types of charts so 6 directives: chart-line, chart-bar, chart-radar, chart-pie,
chart-polar-area, chart-doughnut.
They all use mostly the same API ([chart-] indicates an optional but recommended prefix):
  • [chart-]data: series data
  • [chart-]labels: x axis labels (line, bar, radar) 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-]colours: data colours (will use default colours if not specified)
  • getColour: function that returns a colour in case there are not enough (will use random colours if not specified)
  • [chart-]click: onclick event handler
  • [chart-]hover: onmousemove event handler
  • [chart-]legend: (default: false): show legend below the chart
DEPRECATION WARNING: Note that all attributes which do not use the [chart-] prefix are deprecated
and may be removed in a future version.
There is another directive chart-base that takes an extra attribute chart-type to define the type
dynamically, see stacked bar example.
Example
Markup
<canvasid="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-click="onClick"></canvas>
Javascript
angular.module("app",["chart.js"])// Optional configuration.config(['ChartJsProvider',function(ChartJsProvider){// Configure all chartsChartJsProvider.setOptions({colours: ['#FF5252','#FF8A80'],responsive: false});// Configure all line chartsChartJsProvider.setOptions('Line',{datasetFill: 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
See a simple AMD example
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, colours and options and will update, or destroy and recreate,
the chart on changes.
Events
angular-chart.js emits the following events on the scope and pass the chart as argument:
  • create: when chart is created
  • update: when chart is updated
  • destroy: when chart is destroyed
$scope.$on('create', function (event, 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 listen to the scope destroy event and destroy the chart when it happens.
Colours
There are a set of 7 default colours. Colours can be replaced using the colours attribute.
If there is more data than colours, colours are generated randomly or can be provided
via a function through the getColour attribute.
Hex colours are converted to Chart.js colours automatically,
including different shades for highlight, fill, stroke, etc.
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.
Contributing
Pull requests welcome!
See CONTRIBUTING.md.
Contributors
Thank you to the contributors!
Author
Jerome Touffe-Blin, @jtblin, About me
License
angular-chart.js is copyright 2015 Jerome Touffe-Blin and contributors.
It is licensed under the BSD license. See the include LICENSE file for details.
About
Reactive, responsive, beautiful charts for AngularJS using Chart.js: http://jtblin.github.io/angular-chart.js
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
angular-chart.js
Bower versionnpm versionBuild StatusCode ClimateCode Coverage
Beautiful, reactive, responsive charts for Angular.JS using Chart.js.
Demo
Chart.js 2.0
If you are interested by the upcoming 2.0 version of Chart.js, please checkout the
chartjs-2.0 branch. Report issues
and feedback for this version by opening issues prefixed by "chartjs-2.0" in the title.
See jtblin#123 for more details and subscribe to it to get
the latest progress on Chart.js 2.0 integration.
Installation
bower
bower install --save angular-chart.js

npm
npm install --save angular-chart.js

cdn
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css

manually
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><linkrel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css" /><head><body>
...
</body><scriptsrc="bower_components/angular/angular.min.js"></script><scriptsrc="bower_components/Chart.js/Chart.min.js"></script><scriptsrc="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
Utilisation
There are 6 types of charts so 6 directives: chart-line, chart-bar, chart-radar, chart-pie,
chart-polar-area, chart-doughnut.
They all use mostly the same API ([chart-] indicates an optional but recommended prefix):
  • [chart-]data: series data
  • [chart-]labels: x axis labels (line, bar, radar) 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-]colours: data colours (will use default colours if not specified)
  • getColour: function that returns a colour in case there are not enough (will use random colours if not specified)
  • [chart-]click: onclick event handler
  • [chart-]hover: onmousemove event handler
  • [chart-]legend: (default: false): show legend below the chart
DEPRECATION WARNING: Note that all attributes which do not use the [chart-] prefix are deprecated
and may be removed in a future version.
There is another directive chart-base that takes an extra attribute chart-type to define the type
dynamically, see stacked bar example.
Example
Markup
<canvasid="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-click="onClick"></canvas>
Javascript
angular.module("app",["chart.js"])// Optional configuration.config(['ChartJsProvider',function(ChartJsProvider){// Configure all chartsChartJsProvider.setOptions({colours: ['#FF5252','#FF8A80'],responsive: false});// Configure all line chartsChartJsProvider.setOptions('Line',{datasetFill: 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
See a simple AMD example
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, colours and options and will update, or destroy and recreate,
the chart on changes.
Events
angular-chart.js emits the following events on the scope and pass the chart as argument:
  • create: when chart is created
  • update: when chart is updated
  • destroy: when chart is destroyed
$scope.$on('create', function (event, 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 listen to the scope destroy event and destroy the chart when it happens.
Colours
There are a set of 7 default colours. Colours can be replaced using the colours attribute.
If there is more data than colours, colours are generated randomly or can be provided
via a function through the getColour attribute.
Hex colours are converted to Chart.js colours automatically,
including different shades for highlight, fill, stroke, etc.
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.
Contributing
Pull requests welcome!
See CONTRIBUTING.md.
Contributors
Thank you to the contributors!
Author
Jerome Touffe-Blin, @jtblin, About me
License
angular-chart.js is copyright 2015 Jerome Touffe-Blin and contributors.
It is licensed under the BSD license. See the include LICENSE file for details.
About
Reactive, responsive, beautiful charts for AngularJS using Chart.js: http://jtblin.github.io/angular-chart.js
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
angular-chart.js
Bower versionnpm versionBuild StatusCode ClimateCode Coverage
Beautiful, reactive, responsive charts for Angular.JS using Chart.js.
Demo
Chart.js 2.0
If you are interested by the upcoming 2.0 version of Chart.js, please checkout the
chartjs-2.0 branch. Report issues
and feedback for this version by opening issues prefixed by "chartjs-2.0" in the title.
See jtblin#123 for more details and subscribe to it to get
the latest progress on Chart.js 2.0 integration.
Installation
bower
bower install --save angular-chart.js

npm
npm install --save angular-chart.js

cdn
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css

manually
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><linkrel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css" /><head><body>
...
</body><scriptsrc="bower_components/angular/angular.min.js"></script><scriptsrc="bower_components/Chart.js/Chart.min.js"></script><scriptsrc="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
Utilisation
There are 6 types of charts so 6 directives: chart-line, chart-bar, chart-radar, chart-pie,
chart-polar-area, chart-doughnut.
They all use mostly the same API ([chart-] indicates an optional but recommended prefix):
  • [chart-]data: series data
  • [chart-]labels: x axis labels (line, bar, radar) 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-]colours: data colours (will use default colours if not specified)
  • getColour: function that returns a colour in case there are not enough (will use random colours if not specified)
  • [chart-]click: onclick event handler
  • [chart-]hover: onmousemove event handler
  • [chart-]legend: (default: false): show legend below the chart
DEPRECATION WARNING: Note that all attributes which do not use the [chart-] prefix are deprecated
and may be removed in a future version.
There is another directive chart-base that takes an extra attribute chart-type to define the type
dynamically, see stacked bar example.
Example
Markup
<canvasid="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-click="onClick"></canvas>
Javascript
angular.module("app",["chart.js"])// Optional configuration.config(['ChartJsProvider',function(ChartJsProvider){// Configure all chartsChartJsProvider.setOptions({colours: ['#FF5252','#FF8A80'],responsive: false});// Configure all line chartsChartJsProvider.setOptions('Line',{datasetFill: 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
See a simple AMD example
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, colours and options and will update, or destroy and recreate,
the chart on changes.
Events
angular-chart.js emits the following events on the scope and pass the chart as argument:
  • create: when chart is created
  • update: when chart is updated
  • destroy: when chart is destroyed
$scope.$on('create', function (event, 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 listen to the scope destroy event and destroy the chart when it happens.
Colours
There are a set of 7 default colours. Colours can be replaced using the colours attribute.
If there is more data than colours, colours are generated randomly or can be provided
via a function through the getColour attribute.
Hex colours are converted to Chart.js colours automatically,
including different shades for highlight, fill, stroke, etc.
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.
Contributing
Pull requests welcome!
See CONTRIBUTING.md.
Contributors
Thank you to the contributors!
Author
Jerome Touffe-Blin, @jtblin, About me
License
angular-chart.js is copyright 2015 Jerome Touffe-Blin and contributors.
It is licensed under the BSD license. See the include LICENSE file for details.
About
Reactive, responsive, beautiful charts for AngularJS using Chart.js: http://jtblin.github.io/angular-chart.js
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
angular-chart.js
Bower versionnpm versionBuild StatusCode ClimateCode Coverage
Beautiful, reactive, responsive charts for Angular.JS using Chart.js.
Demo
Chart.js 2.0
If you are interested by the upcoming 2.0 version of Chart.js, please checkout the
chartjs-2.0 branch. Report issues
and feedback for this version by opening issues prefixed by "chartjs-2.0" in the title.
See jtblin#123 for more details and subscribe to it to get
the latest progress on Chart.js 2.0 integration.
Installation
bower
bower install --save angular-chart.js

npm
npm install --save angular-chart.js

cdn
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css

manually
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><linkrel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css" /><head><body>
...
</body><scriptsrc="bower_components/angular/angular.min.js"></script><scriptsrc="bower_components/Chart.js/Chart.min.js"></script><scriptsrc="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
Utilisation
There are 6 types of charts so 6 directives: chart-line, chart-bar, chart-radar, chart-pie,
chart-polar-area, chart-doughnut.
They all use mostly the same API ([chart-] indicates an optional but recommended prefix):
  • [chart-]data: series data
  • [chart-]labels: x axis labels (line, bar, radar) 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-]colours: data colours (will use default colours if not specified)
  • getColour: function that returns a colour in case there are not enough (will use random colours if not specified)
  • [chart-]click: onclick event handler
  • [chart-]hover: onmousemove event handler
  • [chart-]legend: (default: false): show legend below the chart
DEPRECATION WARNING: Note that all attributes which do not use the [chart-] prefix are deprecated
and may be removed in a future version.
There is another directive chart-base that takes an extra attribute chart-type to define the type
dynamically, see stacked bar example.
Example
Markup
<canvasid="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-click="onClick"></canvas>
Javascript
angular.module("app",["chart.js"])// Optional configuration.config(['ChartJsProvider',function(ChartJsProvider){// Configure all chartsChartJsProvider.setOptions({colours: ['#FF5252','#FF8A80'],responsive: false});// Configure all line chartsChartJsProvider.setOptions('Line',{datasetFill: 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
See a simple AMD example
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, colours and options and will update, or destroy and recreate,
the chart on changes.
Events
angular-chart.js emits the following events on the scope and pass the chart as argument:
  • create: when chart is created
  • update: when chart is updated
  • destroy: when chart is destroyed
$scope.$on('create', function (event, 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 listen to the scope destroy event and destroy the chart when it happens.
Colours
There are a set of 7 default colours. Colours can be replaced using the colours attribute.
If there is more data than colours, colours are generated randomly or can be provided
via a function through the getColour attribute.
Hex colours are converted to Chart.js colours automatically,
including different shades for highlight, fill, stroke, etc.
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.
Contributing
Pull requests welcome!
See CONTRIBUTING.md.
Contributors
Thank you to the contributors!
Author
Jerome Touffe-Blin, @jtblin, About me
License
angular-chart.js is copyright 2015 Jerome Touffe-Blin and contributors.
It is licensed under the BSD license. See the include LICENSE file for details.
About
Reactive, responsive, beautiful charts for AngularJS using Chart.js: http://jtblin.github.io/angular-chart.js
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
angular-chart.js
Bower versionnpm versionBuild StatusCode ClimateCode Coverage
Beautiful, reactive, responsive charts for Angular.JS using Chart.js.
Demo
Chart.js 2.0
If you are interested by the upcoming 2.0 version of Chart.js, please checkout the
chartjs-2.0 branch. Report issues
and feedback for this version by opening issues prefixed by "chartjs-2.0" in the title.
See jtblin#123 for more details and subscribe to it to get
the latest progress on Chart.js 2.0 integration.
Installation
bower
bower install --save angular-chart.js

npm
npm install --save angular-chart.js

cdn
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css

manually
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><linkrel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css" /><head><body>
...
</body><scriptsrc="bower_components/angular/angular.min.js"></script><scriptsrc="bower_components/Chart.js/Chart.min.js"></script><scriptsrc="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
Utilisation
There are 6 types of charts so 6 directives: chart-line, chart-bar, chart-radar, chart-pie,
chart-polar-area, chart-doughnut.
They all use mostly the same API ([chart-] indicates an optional but recommended prefix):
  • [chart-]data: series data
  • [chart-]labels: x axis labels (line, bar, radar) 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-]colours: data colours (will use default colours if not specified)
  • getColour: function that returns a colour in case there are not enough (will use random colours if not specified)
  • [chart-]click: onclick event handler
  • [chart-]hover: onmousemove event handler
  • [chart-]legend: (default: false): show legend below the chart
DEPRECATION WARNING: Note that all attributes which do not use the [chart-] prefix are deprecated
and may be removed in a future version.
There is another directive chart-base that takes an extra attribute chart-type to define the type
dynamically, see stacked bar example.
Example
Markup
<canvasid="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-click="onClick"></canvas>
Javascript
angular.module("app",["chart.js"])// Optional configuration.config(['ChartJsProvider',function(ChartJsProvider){// Configure all chartsChartJsProvider.setOptions({colours: ['#FF5252','#FF8A80'],responsive: false});// Configure all line chartsChartJsProvider.setOptions('Line',{datasetFill: 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
See a simple AMD example
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, colours and options and will update, or destroy and recreate,
the chart on changes.
Events
angular-chart.js emits the following events on the scope and pass the chart as argument:
  • create: when chart is created
  • update: when chart is updated
  • destroy: when chart is destroyed
$scope.$on('create', function (event, 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 listen to the scope destroy event and destroy the chart when it happens.
Colours
There are a set of 7 default colours. Colours can be replaced using the colours attribute.
If there is more data than colours, colours are generated randomly or can be provided
via a function through the getColour attribute.
Hex colours are converted to Chart.js colours automatically,
including different shades for highlight, fill, stroke, etc.
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.
Contributing
Pull requests welcome!
See CONTRIBUTING.md.
Contributors
Thank you to the contributors!
Author
Jerome Touffe-Blin, @jtblin, About me
License
angular-chart.js is copyright 2015 Jerome Touffe-Blin and contributors.
It is licensed under the BSD license. See the include LICENSE file for details.
About
Reactive, responsive, beautiful charts for AngularJS using Chart.js: http://jtblin.github.io/angular-chart.js
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
angular-chart.js
Bower versionnpm versionBuild StatusCode ClimateCode Coverage
Beautiful, reactive, responsive charts for Angular.JS using Chart.js.
Demo
Chart.js 2.0
If you are interested by the upcoming 2.0 version of Chart.js, please checkout the
chartjs-2.0 branch. Report issues
and feedback for this version by opening issues prefixed by "chartjs-2.0" in the title.
See jtblin#123 for more details and subscribe to it to get
the latest progress on Chart.js 2.0 integration.
Installation
bower
bower install --save angular-chart.js

npm
npm install --save angular-chart.js

cdn
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css

manually
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><linkrel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css" /><head><body>
...
</body><scriptsrc="bower_components/angular/angular.min.js"></script><scriptsrc="bower_components/Chart.js/Chart.min.js"></script><scriptsrc="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
Utilisation
There are 6 types of charts so 6 directives: chart-line, chart-bar, chart-radar, chart-pie,
chart-polar-area, chart-doughnut.
They all use mostly the same API ([chart-] indicates an optional but recommended prefix):
  • [chart-]data: series data
  • [chart-]labels: x axis labels (line, bar, radar) 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-]colours: data colours (will use default colours if not specified)
  • getColour: function that returns a colour in case there are not enough (will use random colours if not specified)
  • [chart-]click: onclick event handler
  • [chart-]hover: onmousemove event handler
  • [chart-]legend: (default: false): show legend below the chart
DEPRECATION WARNING: Note that all attributes which do not use the [chart-] prefix are deprecated
and may be removed in a future version.
There is another directive chart-base that takes an extra attribute chart-type to define the type
dynamically, see stacked bar example.
Example
Markup
<canvasid="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-click="onClick"></canvas>
Javascript
angular.module("app",["chart.js"])// Optional configuration.config(['ChartJsProvider',function(ChartJsProvider){// Configure all chartsChartJsProvider.setOptions({colours: ['#FF5252','#FF8A80'],responsive: false});// Configure all line chartsChartJsProvider.setOptions('Line',{datasetFill: 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
See a simple AMD example
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, colours and options and will update, or destroy and recreate,
the chart on changes.
Events
angular-chart.js emits the following events on the scope and pass the chart as argument:
  • create: when chart is created
  • update: when chart is updated
  • destroy: when chart is destroyed
$scope.$on('create', function (event, 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 listen to the scope destroy event and destroy the chart when it happens.
Colours
There are a set of 7 default colours. Colours can be replaced using the colours attribute.
If there is more data than colours, colours are generated randomly or can be provided
via a function through the getColour attribute.
Hex colours are converted to Chart.js colours automatically,
including different shades for highlight, fill, stroke, etc.
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.
Contributing
Pull requests welcome!
See CONTRIBUTING.md.
Contributors
Thank you to the contributors!
Author
Jerome Touffe-Blin, @jtblin, About me
License
angular-chart.js is copyright 2015 Jerome Touffe-Blin and contributors.
It is licensed under the BSD license. See the include LICENSE file for details.
About
Reactive, responsive, beautiful charts for AngularJS using Chart.js: http://jtblin.github.io/angular-chart.js
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages