npm-angular-chart

v0.9.0

An angular.js wrapper for Chart.js

NPM

README

GitHub

Website

BSD-2-Clause

Latest version published 5 years ago

    npm install npm-angular-chart

We couldn't find any similar packages Browse all packages

Package Health Score

46 / 100

Popularity
Small
Maintenance
Inactive
Security
Security review needed
Community
Sustainable

Make sure the open source you're using is safe to use

Secure my Project

Popularity

Small

Weekly Downloads (1)

Dependents: 40
GitHub Stars: 2.73K
Forks: 777
Contributors: 30

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,725 times, and that 40 other projects on 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.

Security

Security review needed

Security and license risk for significant versions

All Versions

Direct Vulnerabilities

0.9.0

Indirect Vulnerabilities

0.9.0

License Risks

0.9.0

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

Security Policy: No

Snyk detected that the latest version of npm-angular-chart has a security vulnerability.

We highly advise you to review these security issues.

You can connect your project's repository to Snyk to stay up to date on security alerts and receive automatic fix pull requests.

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

    # Install the Snyk CLI and test your project
npm i snyk && snyk test npm-angular-chart

Fix it in your project with Snyk!

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 99
Merged PR: 49
Open PR: 12
Last Commit: 3 years 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.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 30
Funding: No
License: BSD-2-Clause

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

Package

Node.js Compatibility: not defined

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

We detected a total of 2 direct & transitive dependencies for npm-angular-chart. See the full dependency tree of npm-angular-chart

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.

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