Convert Figma logo to code with AI

jtblin logoangular-chart.js

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

2,666
760
2,666
113
View on GitHubView on NPM

Top Related Projects

chartjs's avatar

Chart.js

66,137

Simple HTML5 Charts using the <canvas> tag

apexcharts's avatar

apexcharts.js

14,813

📊 Interactive JavaScript Charts built on SVG

d3's avatar

d3

111,176

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

highcharts's avatar

highcharts

12,306

Highcharts JS, the JavaScript charting framework

Quick Overview

Angular-chart.js is a lightweight Angular wrapper for Chart.js, a popular JavaScript charting library. It provides a set of directives for easily creating responsive charts in Angular applications, allowing developers to quickly integrate various chart types with minimal configuration.

Pros

  • Easy integration with Angular applications
  • Supports multiple chart types (line, bar, radar, pie, etc.)
  • Responsive and interactive charts out of the box
  • Customizable through Chart.js options

Cons

  • Limited to Chart.js functionality
  • May require additional customization for complex visualizations
  • Documentation could be more comprehensive
  • Dependent on Chart.js updates for new features

Code Examples

  1. Creating a line chart:
<canvas class="chart chart-line" chart-data="data" chart-labels="labels" 
  chart-series="series" chart-options="options"></canvas>
  1. Configuring a bar chart with options:
$scope.options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
};
  1. Updating chart data dynamically:
$scope.addData = function() {
  $scope.data[0].push(Math.random() * 100);
  $scope.labels.push('New Label');
};

Getting Started

  1. Install the package:

    npm install angular-chart.js chart.js

  2. Include the module in your Angular app:

    angular.module('myApp', ['chart.js']);

  3. Use the chart directive in your HTML:

    <canvas class="chart chart-bar" chart-data="data" chart-labels="labels"></canvas>

  4. Configure the chart in your controller:

    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.data = [
  [65, 59, 80, 81, 56, 55, 40]
];

Competitor Comparisons

chartjs logo

Chart.js

66,137

Simple HTML5 Charts using the <canvas> tag

Pros of Chart.js

  • More versatile and can be used with various frameworks, not limited to AngularJS
  • Larger community and more frequent updates
  • Offers a wider range of chart types and customization options

Cons of Chart.js

  • Requires more setup and configuration when used with Angular
  • Less integrated with Angular's data binding and lifecycle

Code Comparison

Angular-chart.js:

<canvas class="chart chart-line" chart-data="data" chart-labels="labels" 
  chart-series="series" chart-options="options"></canvas>

Chart.js:

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

Summary

Chart.js is a more flexible and feature-rich charting library that can be used across different frameworks. It offers more chart types and customization options but requires more setup when used with Angular. Angular-chart.js, on the other hand, is specifically designed for AngularJS, providing easier integration with Angular's features but with a more limited set of chart types and customization options. The choice between the two depends on the specific needs of the project and the developer's familiarity with Angular.

apexcharts logo

apexcharts.js

14,813

📊 Interactive JavaScript Charts built on SVG

Pros of ApexCharts.js

  • More extensive chart types and customization options
  • Better performance with large datasets
  • Active development and frequent updates

Cons of ApexCharts.js

  • Larger file size, potentially impacting load times
  • Steeper learning curve due to more complex API
  • Not specifically designed for Angular integration

Code Comparison

angular-chart.js:

$scope.labels = ["January", "February", "March"];
$scope.data = [300, 500, 100];
$scope.type = 'pie';

ApexCharts.js:

var options = {
  chart: { type: 'pie' },
  series: [300, 500, 100],
  labels: ['January', 'February', 'March']
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

While angular-chart.js is more concise and integrates seamlessly with Angular's scope, ApexCharts.js offers more flexibility and control over chart creation and rendering. ApexCharts.js is framework-agnostic, making it suitable for various JavaScript environments, whereas angular-chart.js is specifically designed for Angular applications. The trade-off is between simplicity and power, with ApexCharts.js providing more advanced features at the cost of a slightly more verbose implementation.

d3 logo

d3

111,176

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Pros of d3

  • Highly flexible and powerful, allowing for complex and custom visualizations
  • Large and active community, extensive documentation, and numerous examples
  • Can be used with any web technology, not limited to a specific framework

Cons of d3

  • Steeper learning curve due to its low-level nature
  • Requires more code to create basic charts compared to Angular-chart.js
  • Less out-of-the-box functionality for common chart types

Code Comparison

d3:

const svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 300);

svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", (d, i) => i * 40)
    .attr("y", d => 300 - d * 10)
    .attr("width", 38)
    .attr("height", d => d * 10);

Angular-chart.js:

$scope.labels = ["January", "February", "March"];
$scope.data = [300, 500, 100];
$scope.type = 'bar';

<canvas class="chart chart-base" chart-type="type"
  chart-data="data" chart-labels="labels">
</canvas>

This comparison highlights the differences in approach between d3, which offers fine-grained control over chart elements, and Angular-chart.js, which provides a more declarative and simplified API for common chart types.

highcharts logo

highcharts

12,306

Highcharts JS, the JavaScript charting framework

Pros of Highcharts

  • More extensive and feature-rich charting library
  • Supports a wider range of chart types and customization options
  • Better documentation and community support

Cons of Highcharts

  • Commercial license required for most use cases
  • Steeper learning curve due to its extensive API
  • Larger file size, which may impact page load times

Code Comparison

Highcharts:

Highcharts.chart('container', {
  chart: { type: 'bar' },
  series: [{
    data: [1, 2, 3, 4, 5]
  }]
});

angular-chart.js:

<canvas class="chart chart-bar"
  chart-data="data"
  chart-labels="labels">
</canvas>

Summary

Highcharts offers a more comprehensive charting solution with extensive features and customization options, but comes with a commercial license and a steeper learning curve. angular-chart.js, built on Chart.js, provides a simpler, open-source alternative that integrates well with Angular applications. The choice between the two depends on project requirements, budget constraints, and the desired level of chart complexity.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

angular-chart.js

Bower version npm version Build Status Codacy Badge Code Coverage npm

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

Have a look at the demo site to see examples with detailed markup, script and options.

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 now chart-colors and chart-get-colour is now chart-get-color
  • chart types are in camelCase e.g. line and polarArea
  • 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 global Chart.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.js

cdn

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

bower

bower install --save angular-chart.js

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>
  ...
<head>
<body>
  ...
</body>
  <script src="node_modules/angular/angular.min.js"></script>
  <script src="node_modules/chart.js/dist/Chart.min.js"></script>
  <script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>

Utilisation

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

Here are the options for all directives:

  • chart-data: series data
  • chart-labels: x axis labels (line, bar, horizontal bar, radar, bubble) 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-colors: data colors (will use default colors if not specified)
  • chart-get-color: function that returns a color in case there are not enough (will use random colors if not specified)
  • chart-click: onclick event handler
  • chart-hover: onmousemove event handler
  • chart-dataset-override: override individual datasets to allow per dataset configuration e.g. y-axis, mixed type chart

There is another directive chart-base that takes an extra attribute chart-type to define the type dynamically.

You can create mixed type chart using the chart-dataset-override, see bar-line example.

See also stacked bar example.

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

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, 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 created
  • chart-update: when chart is updated
  • chart-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!

Author

Jerome Touffe-Blin, @jtblin, About me

License

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

NPM DownloadsLast 30 Days