Package Health Score

47 / 100

security
Security review needed
popularity
Small
maintenance
Inactive
community
Sustainable

Security

Security review needed

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
0.9.0	\|	04/2016	Popular	0 C 1 H 2 M 0 L	0 H 0 M 0 L

License

BSD-2-Clause

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (1)

Dependents: 40
GitHub Stars: 2.7K
Forks: 776
Contributors: 40

Direct Usage Popularity

The npm package npm-angular-chart receives a total of 1 downloads a week. As such, we scored npm-angular-chart popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package npm-angular-chart, we found that it has been starred 2,697 times, and that 40 other projects in the ecosystem are dependent on it.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: Yes
Code of Conduct: No
Contributors: 40
Funding: No

With more than 10 contributors for the npm-angular-chart repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like npm-angular-chart is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

Open Issues: 97
Open PR: 15
Last Release: 7 years ago
Last Commit: 1 month ago

Further analysis of the maintenance status of npm-angular-chart based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for npm-angular-chart is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 7 years
Dependencies: 2 Direct
Versions: 2
Install Size: 0 B
Dist-tags: 1
# of Files: 0
Maintainers: 1
TS Typings: No

npm-angular-chart has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

angular-chart.js

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 https://github.com/jtblin/angular-chart.js/issues/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>
  <link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css" />
<head>
<body>
  ...
</body>
  <script src="bower_components/angular/angular.min.js"></script>
  <script src="bower_components/Chart.js/Chart.min.js"></script>
  <script src="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

<canvas id="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 charts
    ChartJsProvider.setOptions({
      colours: ['#FF5252', '#FF8A80'],
      responsive: false
    });
    // Configure all line charts
    ChartJsProvider.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 https://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

npm-angular-chart dependencies

angular chart.js

FAQs

What is npm-angular-chart?

An angular.js wrapper for Chart.js. Visit Snyk Advisor to see a full health score report for npm-angular-chart, including popularity, security, maintenance & community analysis.

Is npm-angular-chart popular?

The npm package npm-angular-chart receives a total of 1 weekly downloads. As such, npm-angular-chart popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is npm-angular-chart well maintained?

We found indications that npm-angular-chart is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is npm-angular-chart safe to use?

While scanning the latest version of npm-angular-chart, we found that a security review is needed. A total of 3 vulnerabilities or license issues were detected. See the full security scan results.

Last updated on 1 October-2022, at 04:25 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (1)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

angular-chart.js

Chart.js 2.0

Installation

bower

npm

cdn

manually

Utilisation

Example

Markup

Javascript

AMD RequireJS

CommonJS e.g. webpack

Reactive

Events

Colours

Browser compatibility

Issues

Contributing

Contributors

Author

License

npm-angular-chart dependencies

npm-angular-chart development dependencies

FAQs

What is npm-angular-chart?

Is npm-angular-chart popular?

Is npm-angular-chart well maintained?

Is npm-angular-chart safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues