Beautiful charts for Angular based on Chart.js

Related tags

Data Visualization ng2-charts
Overview

ng2-charts npm version npm downloads Travis CI slack

Beautiful charts for Angular based on Chart.js

NPM NPM

Usage & Demo

Samples using ng2-charts

https://valor-software.com/ng2-charts/

Installation

You can install ng2-charts by using the Angular CLI:

ng add ng2-charts@next

The required packages will be automatically installed, and your app.module.ts will be updated with the required changes to start using the library right away.

Manual install through package managers

  1. You can install ng2-charts using npm
npm install ng2-charts@next --save

or yarn

yarn add ng2-charts@next --save
  1. You will also need to install and include Chart.js library in your application (it is a peer dependency of this library, more info can be found in the official chart.js documentation)
npm install chart.js --save

or with yarn:

yarn add  chart.js --save
  1. Import the NgChartsModule in your app main module:
import { NgChartsModule } from 'ng2-charts';

// In your App's module:
imports: [
  NgChartsModule
]

Stackblitz Starting Templates

API

Chart types

There is one directive for all chart types: baseChart, and there are 8 types of charts: line, bar, radar, pie , polarArea, doughnut, bubble and scatter. You can use the directive on a canvas element as follows:

<canvas baseChart
      [data]="barChartData"
      [options]="barChartOptions"
      [type]="'bar'">
</canvas>

Properties

Note: For more information about possible options please refer to original chart.js documentation

  • type: (ChartType) - indicates the type of chart, it can be: line, bar, radar, pie, polarArea, doughnut or any custom type added to Chart.js
  • data: (ChartData<TType, TData, TLabel>) - the whole data structure to be rendered in the chart. Support different flexible formats and parsing options, see here. In alternative, and depending on the type of your chart, you can use the labels and datasets properties to specify individual options.
  • labels: (TLabel[]) - Datasets labels. It's necessary for charts: line, bar and radar. And just labels (on hover) for charts: polarArea, pie and doughnut. Labels are matched in order with the datasets array.
  • datasets: ( ChartDataset<TType, TData>[]) - Same as the datasets property of the data input. See here for details.
  • options: (ChartOptions<TType>) - chart options (as per chart.js documentation).
  • legend: (boolean = false) - if true, chart legend is shown.

Events

  • chartClick: fires when click on a chart has occurred, returns information regarding active points and labels
  • chartHover: fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels

Colors

The library comes with a set of predefined default colors (which are exported as baseColors). If there are more datasets than colors, colors are generated randomly. You can specify custom colors by following these instructions.

Dynamic Theming

The NgChartsModule provides a service called ThemeService which allows clients to set a structure specifying colors override settings. This service may be called when the dynamic theme changes, with colors which fit the theme. The structure is interpreted as an override, with special functionality when dealing with arrays. Example:

type Theme = 'light-theme' | 'dark-theme';

private _selectedTheme: Theme = 'light-theme';
public get selectedTheme(){
  return this._selectedTheme;
}

public set selectedTheme(value){
  this._selectedTheme = value;
  let overrides: ChartOptions;
  if (this.selectedTheme === 'dark-theme') {
    overrides = {
      legend: {
        labels: { fontColor: 'white' }
      },
      scales: {
        xAxes: [ {
          ticks: { fontColor: 'white' },
          gridLines: { color: 'rgba(255,255,255,0.1)' }
        } ],
        yAxes: [ {
          ticks: { fontColor: 'white' },
          gridLines: { color: 'rgba(255,255,255,0.1)' }
        } ]
      }
    };
  } else {
    overrides = {};
  }
  this.themeService.setColorschemesOptions(overrides);
}

constructor(private themeService: ThemeService<AppChartMetaConfig>){
}

setCurrentTheme(theme: Theme){
  this.selectedTheme = theme;
}

The overrides object has the same type as the chart options object ChartOptions, and wherever a simple field is encountered it replaces the matching field in the options object. When an array is encountered (as in the xAxes and yAxes fields above), the single object inside the array is used as a template to override all array elements in the matching field in the options object. So in the case above, every axis will have its ticks and gridline colors changed.

Schematics

There are schematics that may be used to add this library to your project and generate chart components using Angular CLI.

Installation of library through ng-add schematics

ng add ng2-charts

This schematics will add the NgChartsModule as an imported module in the main app module (or another module as specified in the --module command option).

Example of Generating a Line Chart using Angular CLI

ng generate ng2-charts:line my-line-chart

This calls angular's component schematics and then modifies the result, so all the options for the component schematic are also usable here.

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

  1. Use GitHub Issues board to report bugs and feature requests ( not our email address)
  2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the LICENSE file for the full text)

Comments
  • Calling update to refresh the chart.

    Calling update to refresh the chart.

    How do you go about updating the chart? After getting the chart to display, I changed the color of points to red if they are clicked. If the user clicks multiple points, then the older points go back to their original color. However, it only goes back if I hover my mouse over the old point. I would like this behavior to be automatic - I would imagine that calling update on the chart would work, but I get the error:

    TypeError: this.chartObject.update is not a function...

    Any ideas on how to do this with or without calling update?

    opened by katsuragi545 49
  • Chart doesn't redraw / update non data/dataset related settings

    Chart doesn't redraw / update non data/dataset related settings

    Looking at the code I realized that dynamic changes to the data/datasets is indeed supported and will cause the chart to update.

    BUT, no other change to a chart is being supported, eg. labels (amount or text), changes to the settings etc. this would require a complete chart redraw (chartJS dependency?) as far as I can tell.

    In your code, I see that getChartBuilder() does that, triggered by refresh() which only happens on 2 occasions: ngOnInit() & ngOnChanges() IF not changes.hasOwnProperty('data') || ...

    That's quite a bit of limitation right there.

    I recommend to add public method to call a complete refresh or better yet, adapt the ngOnChanges() routine to look for new changes to other chart settings and if outside of data/dataset changes call refresh() instead of just an update().

    opened by olivermuc 29
  • How to display value on Chart (ionic 2)?

    How to display value on Chart (ionic 2)?

    I want to display plotted values on Chart always. Currently its showing when user hover / click on the chart. How to show values always on the chart? i attached the sample image that i want to display the values (i attached bar chart but i want to display values on all type of charts). screen shot 2017-05-17 at 12 14 42 pm

    opened by venkadesh02 29
  • How to display value above bar chart

    How to display value above bar chart

    Hi.

    I would like to display the value above bar chart. image

    Component.ts

    import { Component, OnInit } from '@angular/core';
import { ProspectService } from './prospect.service';
import {Observable} from 'rxjs/Rx';
import { Prospect } from './prospect';
import { ChartData } from "../chartData";

@Component({
  selector: 'app-prospects',
  templateUrl: './prospects.component.html',
  styleUrls: ['./prospects.component.css'],
  providers : [ProspectService]
})
export class ProspectsComponent implements OnInit {
  private prospects: Array<Prospect> = [];

  public barChartOptions:any = {
      scaleShowVerticalLines: false,
      responsive: true, 
      scaleShowValues: true, 
      scaleValuePaddingX: 10,
      scaleValuePaddingY: 10
  };

  public barChartLabels:string[] = ['Test'];
  public barChartType : string = 'bar';
  public barChartLegend: boolean = true;
  public barChartData: ChartData[] = [
    {data: [50], label: 'Series A'}
  ];


  public chartColors: Array<any> = [
    { // first color
      backgroundColor: '#67b346',
      //backgroundColor:["#FF7360", "#6FC8CE", "#FAFFF2", "#FFFCC4", "#B9E8E0"],
      borderColor: '#000000',
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(225,10,24,0.2)'
    }];
 
  // events
  public chartClicked(e:any):void {
    //console.log(e);
  }
 
  public chartHovered(e:any):void {
    //console.log(e);
  }
  constructor(private prospectService : ProspectService) { 
  	Observable.interval(10000).subscribe(x => { //every 10 seconds
		    this.getProspect();
	});
  }

  ngOnInit() {
  	this.getProspect();
  }

  public getProspect(): void{
  	this.prospectService.getProspects().then(response => {
  		this.prospects = response;
  		this.setValuesToChart();
  	});
  }

  public setValuesToChart(): void{
  	let i =0;
  	this.clearValues();
  	var newData = new ChartData();
    this.prospects.forEach((prospect) =>{
    	if(i != 0){
	    	this.barChartLabels.push(prospect.name);
	    	newData.data.push(prospect.value);
	    	newData.label = " Estimated Prospect Value by Account Manager";
	    }
	    i++;
    });
    this.barChartData.push(newData);
    this.barChartData = this.barChartData.slice();
  }

  public clearValues() : void{
    this.barChartData.forEach((info) =>{
      info.data.slice(0);
    });
    this.barChartData.splice(0);
    this.barChartLabels.splice(0);
  }

}

    Component.html

    <div class="container-fluid">
	<div>
	  <div style="display: block">
	    <canvas baseChart height="140"
	            [datasets]="barChartData"
	            [labels]="barChartLabels"
	            [options]="barChartOptions"
	            [legend]="barChartLegend"
	            [colors]="chartColors"
	            [chartType]="barChartType"
	            (chartHover)="chartHovered($event)"
	            (chartClick)="chartClicked($event)">
	            
	    </canvas>
	  </div>
	</div>
</div>

    Hope someone could help me

    Thanks :)

    opened by sarn3792 27
  • Error using ng2-charts with angular webpack

    Error using ng2-charts with angular webpack

    This is my configuration:

    In the .ts file and imported as import 'chart.js/src/chart.js'; where I need to use it. I added it in my app.module.ts as well.

    But when running the App I have this error:

    ERROR Error: Uncaught (in promise): TypeError: Chart.controllers[meta.type] is not a constructor TypeError: Chart.controllers[meta.type] is not a constructor at Chart.Controller.eval (eval at (http://localhost:3000/js/app/bundle.js:2499:1), :272:24) at Object.helpers.each (eval at (http://localhost:3000/js/app/bundle.js:2520:1), :23:15)

    Is there any particular configuration to do using webpack? I saw many issues which says to add it as a script tag in the index.html file but it did not work for me. I think this problems is NOT related to that.

    Thanks

    opened by agustincelentano 26
  • Cannot read property 'data' of undefined

    Cannot read property 'data' of undefined

    After updating from 1.2 to 1.3.

    This line of code this.chart.data.datasets = this.getDatasets(); gives me error when I show chart:

    Cannot read property 'data' of undefined

    Tring to reproduce the issue in plunker, got no luck so far...

    opened by Hongbo-Miao 25
  • Can't get anything to display in browser.

    Can't get anything to display in browser.

    I haven't been able to get anything to display in my browser. I'm currently using a slightly modified version of the quickstart source project provided by the official Angular 2 site - it simply prints "My First Angular App' to the browser. I've added the HTML and Typescript code to the project and nothing displays. I've added a Google Drive link to a zip file containing the entire project I'm using - if anyone can point me in the right direction that would be great - I've been at this for hours and making absolutely no progress. I have updated my Angular 2 version to rc1.

    Google Drive link to project: https://drive.google.com/open?id=0B67vjAYn5WnTajdMZnBJZU9tMTg

    opened by katsuragi545 23
  • Access Chart object in 1.4.0?

    Access Chart object in 1.4.0?

    Prior to upgrading to 1.4.0, I was able to get the Chart.js object by assigning it to a local variable like so:

                        <base-chart #Chart class="chart"
                        [datasets]="lineChartData"
                        [labels]="lineChartLabels"
                        [options]="lineChartOptions"
                        [colors]="lineChartColors"
                        [legend]="lineChartLegend"
                        [chartType]="lineChartType"
                        (chartHover)="chartHovered($event)"
                        (chartClick)="chartClicked($event)">
                    </base-chart>

    Then in my component class, get the object like so:

        import { Component, ViewChild } from '@angular/core';
    import { Http, Headers, RequestOptions, Response } from '@angular/http';
    require('chart.js');

    @Component({
        selector: 'chart-cmp',
        templateUrl: './chart.template.html'
    })

    export class ChartComponent {
        /* Store Chart Instance */
        @ViewChild('Chart') Chart
    }

    However, in ng2-charts 1.4.0 after breaking changes to the component

                        <canvas baseChart #Chart class="chart"
                        [datasets]="lineChartData"
                        [labels]="lineChartLabels"
                        [options]="lineChartOptions"
                        [colors]="lineChartColors"
                        [legend]="lineChartLegend"
                        [chartType]="lineChartType"
                        (chartHover)="chartHovered($event)"
                        (chartClick)="chartClicked($event)">
                    </canvas>

    When I check the value of #Chart it only returns a nativeElement now.

    How do we access the Chart.js object with all of the methods/properties?

    opened by anthony-pinskey 22
  • Error: Can't resolve '@valor-software/ng2-charts'

    Error: Can't resolve '@valor-software/ng2-charts'

    My angular app is running perfectly in local environment. But when I try to build app (ng build --aot), it shows the following error:

    Module not found: Error: Can't resolve '@valor-software/ng2-charts' in '.\src\app'
ERROR in ./src/app/views/dashboard/dashboard.module.ngfactory.js
Module not found: Error: Can't resolve '@valor-software/ng2-charts' in '.\src\app\views\dashboard'
ERROR in ./src/app/views/dashboard/user-stats/user-stats.component.ngfactory.js
Module not found: Error: Can't resolve '@valor-software/ng2-charts' in '.\src\app\views\dashboard\user-stats'

    Global Angular:

    Angular CLI: 9.1.12
Node: 12.18.3
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.12
@angular-devkit/core         9.1.12
@angular-devkit/schematics   9.1.12
@schematics/angular          9.1.12
@schematics/update           0.901.12
rxjs                         6.5.4

    App angular::

        "@angular-devkit/build-angular": "~0.900.1",
    "@angular/cli": "^9.0.1",
    "@angular/compiler-cli": "^9.0.0",

    ng-charts

    "ng2-charts": "^2.4.1",
"chart.js": "^2.9.2",

    How can I solve this issue? Thanks in Advance

    opened by sabbir-hossain 21
  • ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function

    ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function

    Reproduction of the problem

    ng2-charts is a port & modification of Chart.js component for Angular 2. Sometimes the issue is related to Chart.js instead of ng2-charts. To confirm, if the issue shows in a pure Chart.js project, it is an issue of Chart.js. Pure Chart.js starting template: https://jsfiddle.net/Hongbo_Miao/mvct2uwo/3/

    If the issue does not show in a pure Chart.js project and shows in an Screenshot from 2019-06-05 13-27-55 the ng2-charts project, please try to provide a minimal demo of the problem. ng2-charts starting template: http://plnkr.co/edit/Ka4NXG3pZ1mXnaN95HX5?p=preview

    opened by mshubhamtyagi 20
  • Chart not showing using Angular2 RC1 in CLI project

    Chart not showing using Angular2 RC1 in CLI project

    I'm having trouble integrating ng2-charts into a CLI project. After spending hours trying to use charts in a CLI project, I finally got it integrated and it builds/runs without errors, but the graph doesn't show up. I can see that the directive is getting rendered (there's a <canvas> element within the base-chart element), but it's all empty.

    I took the following steps:

    • Created a new project (named dependencies) using ng new dependencies

    • Followed the installation instructions for ng2-charts, i.e., executed npm install ng2-charts --save npm install chart.js --save and added a script reference to the index.html (<script src="vendor/chart.js/dist/Chart.min.js"></script>)

    • Adjusted the angular-cli-build.js to copy the npm files into the dist directory:

      vendorNpmFiles: [ ... 'chart.js/dist/Chart.min.js', 'ng2-charts/*/.js' ]

    • Adjusted the system.config.js in order to map the name 'ng2-charts' to the respective vendor directory and the package name ng2-charts to it's main file.

      const map: any = { 'ng2-charts': 'vendor/ng2-charts' }; /** User packages configuration. */ const packages: any = { 'ng2-charts': { main: 'bundles/ng2-charts.min.js'
      }
      };

    • Copied the ts code/html from the line chart example (http://valor-software.com/ng2-charts/)

    Anyone knows the issue or has a project using Angular2 CLI with ng2-charts integrated? I uploaded the code to https://github.com/thorstenschaefer/dependencies. All changes from the newly created CLI project can be seen here: https://github.com/thorstenschaefer/dependencies/commit/8169b429d37b72bb9e8718b76d27c258602d1c07

    opened by thorstenschaefer 20
  • How to specify pert-chart plugins?

    How to specify pert-chart plugins?

    Sorry, this is only a question I can't solve about plugins registration:

    Standard chatjs accepts to register per-chart plugin this way:

    const plugin = { /* plugin implementation */ };

// chart1 and chart2 use "plugin"
const chart1 = new Chart(ctx, {
    plugins: [plugin]
});

const chart2 = new Chart(ctx, {
    plugins: [plugin]
});

// chart3 doesn't use "plugin"
const chart3 = new Chart(ctx, {});

    How can this be performed using ng2-charts?

    thank you for advance

    opened by ddcovery 2
  • Doughnut legend will not display

    Doughnut legend will not display

    With the following data and code, I am unable to get the legend to display. So far, I haven't been able to get a legend to display.

    .doughnutChart { display: flex; margin: auto; height: 300px; width: 300px; }

    @Input() doughnutChartData: ChartData<'doughnut'> = { datasets: [], labels: [], }; public doughnutChartType: ChartType = 'doughnut'; public doughnutChartLegend = true;

    @Input parameter { "labels": { "0": "Owned", "1": "Shared" }, "datasets": [ { "data": [ 44, 15 ] } ] }

    opened by rdppjr 0
  • chore(deps-dev): bump @angular-devkit/schematics from 14.2.10 to 15.0.4

    chore(deps-dev): bump @angular-devkit/schematics from 14.2.10 to 15.0.4

    Bumps @angular-devkit/schematics from 14.2.10 to 15.0.4.

    Release notes

    Sourced from @​angular-devkit/schematics's releases.

    v15.0.4

    15.0.4 (2022-12-14)

    @​angular-devkit/build-angular

    Commit Description
    fix - ccc8e0350 display actionable error when a style does not exist in Karma builder
    fix - 507f756c3 downlevel class private methods when targeting Safari <=v15
    fix - a0da91dba include sources in generated Sass source maps
    fix - 9fd356234 only set ngDevMode when script optimizations are enabled
    fix - 8e85f4728 update css-loader to 6.7.3
    fix - b2d4415ca update locale setting snippet to use globalThis.

    Special Thanks

    Alan Agius and Charles Lyding

    v15.0.3

    15.0.3 (2022-12-07)

    @​angular-devkit/build-angular

    Commit Description
    fix - 3d9971edb default preserve symlinks to Node.js value for esbuild
    fix - 24f4b51d2 downlevel class fields with Safari <= v15 for esbuild
    fix - 45afc42db downlevel class properties when targeting Safari <=v15
    fix - e6461badf prevent optimization adding unsupported ECMASCript features

    Special Thanks

    Charles Lyding, Dominic Elm and Paul Gschwendtner

    v15.0.2

    15.0.2 (2022-11-30)

    @​angular-devkit/build-angular

    Commit Description
    fix - 2891d5bc9 correctly set Sass quietDeps and verbose options

    @​ngtools/webpack

    Commit Description
    fix - d9cc4b028 elide unused type references

    Special Thanks

    Alan Agius and Juuso Valkeejärvi

    v15.0.1

    15.0.1 (2022-11-23)

    @​schematics/angular

    Commit Description
    fix - 48426852b show warning when a TS Config is not found during migrations

    @​angular/cli

    ... (truncated)

    Changelog

    Sourced from @​angular-devkit/schematics's changelog.

    15.0.4 (2022-12-14)

    @​angular-devkit/build-angular

    Commit Type Description
    ccc8e0350 fix display actionable error when a style does not exist in Karma builder
    507f756c3 fix downlevel class private methods when targeting Safari <=v15
    a0da91dba fix include sources in generated
    9fd356234 fix only set ngDevMode when script optimizations are enabled
    8e85f4728 fix update css-loader to 6.7.3
    b2d4415ca fix update locale setting snippet to use globalThis.

    Special Thanks

    Alan Agius and Charles Lyding

    15.1.0-next.2 (2022-12-08)

    @​schematics/angular

    Commit Type Description
    5b18ce154 feat add guardType as an alias of implements in guard schematic
    49b313f27 fix add missing import for functional interceptor spec
    2f92fe7e5 fix add missing semicolon in functional guard/resolver/interceptor

    @​angular-devkit/build-angular

    Commit Type Description
    97716969c fix default preserve symlinks to Node.js value for esbuild
    cf2f30afc fix downlevel class fields with Safari <= v15 for esbuild
    25eaaa24b fix downlevel class properties when targeting Safari <=v15
    7a063238b fix explicitly send options to JS transformer workers
    ef99a68b4 fix prevent optimization adding unsupported ECMASCript features

    Special Thanks

    Alan Agius, Charles Lyding, Cédric Exbrayat, Dominic Elm, Doug Parker and Paul Gschwendtner

    15.0.3 (2022-12-07)

    ... (truncated)

    Commits
    • 8771258 release: cut the v15.0.4 release
    • 8e85f47 fix(@​angular-devkit/build-angular): update css-loader to 6.7.3
    • 9fd3562 fix(@​angular-devkit/build-angular): only set ngDevMode when script optimizati...
    • ccc8e03 fix(@​angular-devkit/build-angular): display actionable error when a style doe...
    • 507f756 fix(@​angular-devkit/build-angular): downlevel class private methods when targ...
    • b2d4415 fix(@​angular-devkit/build-angular): update locale setting snippet to use `glo...
    • a0da91d fix(@​angular-devkit/build-angular): include sources in generated
    • eb2a73a release: cut the v15.0.3 release
    • 3d9971e fix(@​angular-devkit/build-angular): default preserve symlinks to Node.js valu...
    • 24f4b51 fix(@​angular-devkit/build-angular): downlevel class fields with Safari <= v15...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump @angular-devkit/core from 14.2.10 to 15.0.4

    chore(deps-dev): bump @angular-devkit/core from 14.2.10 to 15.0.4

    Bumps @angular-devkit/core from 14.2.10 to 15.0.4.

    Release notes

    Sourced from @​angular-devkit/core's releases.

    v15.0.4

    15.0.4 (2022-12-14)

    @​angular-devkit/build-angular

    Commit Description
    fix - ccc8e0350 display actionable error when a style does not exist in Karma builder
    fix - 507f756c3 downlevel class private methods when targeting Safari <=v15
    fix - a0da91dba include sources in generated Sass source maps
    fix - 9fd356234 only set ngDevMode when script optimizations are enabled
    fix - 8e85f4728 update css-loader to 6.7.3
    fix - b2d4415ca update locale setting snippet to use globalThis.

    Special Thanks

    Alan Agius and Charles Lyding

    v15.0.3

    15.0.3 (2022-12-07)

    @​angular-devkit/build-angular

    Commit Description
    fix - 3d9971edb default preserve symlinks to Node.js value for esbuild
    fix - 24f4b51d2 downlevel class fields with Safari <= v15 for esbuild
    fix - 45afc42db downlevel class properties when targeting Safari <=v15
    fix - e6461badf prevent optimization adding unsupported ECMASCript features

    Special Thanks

    Charles Lyding, Dominic Elm and Paul Gschwendtner

    v15.0.2

    15.0.2 (2022-11-30)

    @​angular-devkit/build-angular

    Commit Description
    fix - 2891d5bc9 correctly set Sass quietDeps and verbose options

    @​ngtools/webpack

    Commit Description
    fix - d9cc4b028 elide unused type references

    Special Thanks

    Alan Agius and Juuso Valkeejärvi

    v15.0.1

    15.0.1 (2022-11-23)

    @​schematics/angular

    Commit Description
    fix - 48426852b show warning when a TS Config is not found during migrations

    @​angular/cli

    ... (truncated)

    Changelog

    Sourced from @​angular-devkit/core's changelog.

    15.0.4 (2022-12-14)

    @​angular-devkit/build-angular

    Commit Type Description
    ccc8e0350 fix display actionable error when a style does not exist in Karma builder
    507f756c3 fix downlevel class private methods when targeting Safari <=v15
    a0da91dba fix include sources in generated
    9fd356234 fix only set ngDevMode when script optimizations are enabled
    8e85f4728 fix update css-loader to 6.7.3
    b2d4415ca fix update locale setting snippet to use globalThis.

    Special Thanks

    Alan Agius and Charles Lyding

    15.1.0-next.2 (2022-12-08)

    @​schematics/angular

    Commit Type Description
    5b18ce154 feat add guardType as an alias of implements in guard schematic
    49b313f27 fix add missing import for functional interceptor spec
    2f92fe7e5 fix add missing semicolon in functional guard/resolver/interceptor

    @​angular-devkit/build-angular

    Commit Type Description
    97716969c fix default preserve symlinks to Node.js value for esbuild
    cf2f30afc fix downlevel class fields with Safari <= v15 for esbuild
    25eaaa24b fix downlevel class properties when targeting Safari <=v15
    7a063238b fix explicitly send options to JS transformer workers
    ef99a68b4 fix prevent optimization adding unsupported ECMASCript features

    Special Thanks

    Alan Agius, Charles Lyding, Cédric Exbrayat, Dominic Elm, Doug Parker and Paul Gschwendtner

    15.0.3 (2022-12-07)

    ... (truncated)

    Commits
    • 8771258 release: cut the v15.0.4 release
    • 8e85f47 fix(@​angular-devkit/build-angular): update css-loader to 6.7.3
    • 9fd3562 fix(@​angular-devkit/build-angular): only set ngDevMode when script optimizati...
    • ccc8e03 fix(@​angular-devkit/build-angular): display actionable error when a style doe...
    • 507f756 fix(@​angular-devkit/build-angular): downlevel class private methods when targ...
    • b2d4415 fix(@​angular-devkit/build-angular): update locale setting snippet to use `glo...
    • a0da91d fix(@​angular-devkit/build-angular): include sources in generated
    • eb2a73a release: cut the v15.0.3 release
    • 3d9971e fix(@​angular-devkit/build-angular): default preserve symlinks to Node.js valu...
    • 24f4b51 fix(@​angular-devkit/build-angular): downlevel class fields with Safari <= v15...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump @angular/cli from 14.2.10 to 15.0.4

    chore(deps-dev): bump @angular/cli from 14.2.10 to 15.0.4

    Bumps @angular/cli from 14.2.10 to 15.0.4.

    Release notes

    Sourced from @​angular/cli's releases.

    v15.0.4

    15.0.4 (2022-12-14)

    @​angular-devkit/build-angular

    Commit Description
    fix - ccc8e0350 display actionable error when a style does not exist in Karma builder
    fix - 507f756c3 downlevel class private methods when targeting Safari <=v15
    fix - a0da91dba include sources in generated Sass source maps
    fix - 9fd356234 only set ngDevMode when script optimizations are enabled
    fix - 8e85f4728 update css-loader to 6.7.3
    fix - b2d4415ca update locale setting snippet to use globalThis.

    Special Thanks

    Alan Agius and Charles Lyding

    v15.0.3

    15.0.3 (2022-12-07)

    @​angular-devkit/build-angular

    Commit Description
    fix - 3d9971edb default preserve symlinks to Node.js value for esbuild
    fix - 24f4b51d2 downlevel class fields with Safari <= v15 for esbuild
    fix - 45afc42db downlevel class properties when targeting Safari <=v15
    fix - e6461badf prevent optimization adding unsupported ECMASCript features

    Special Thanks

    Charles Lyding, Dominic Elm and Paul Gschwendtner

    v15.0.2

    15.0.2 (2022-11-30)

    @​angular-devkit/build-angular

    Commit Description
    fix - 2891d5bc9 correctly set Sass quietDeps and verbose options

    @​ngtools/webpack

    Commit Description
    fix - d9cc4b028 elide unused type references

    Special Thanks

    Alan Agius and Juuso Valkeejärvi

    v15.0.1

    15.0.1 (2022-11-23)

    @​schematics/angular

    Commit Description
    fix - 48426852b show warning when a TS Config is not found during migrations

    @​angular/cli

    ... (truncated)

    Changelog

    Sourced from @​angular/cli's changelog.

    15.0.4 (2022-12-14)

    @​angular-devkit/build-angular

    Commit Type Description
    ccc8e0350 fix display actionable error when a style does not exist in Karma builder
    507f756c3 fix downlevel class private methods when targeting Safari <=v15
    a0da91dba fix include sources in generated
    9fd356234 fix only set ngDevMode when script optimizations are enabled
    8e85f4728 fix update css-loader to 6.7.3
    b2d4415ca fix update locale setting snippet to use globalThis.

    Special Thanks

    Alan Agius and Charles Lyding

    15.1.0-next.2 (2022-12-08)

    @​schematics/angular

    Commit Type Description
    5b18ce154 feat add guardType as an alias of implements in guard schematic
    49b313f27 fix add missing import for functional interceptor spec
    2f92fe7e5 fix add missing semicolon in functional guard/resolver/interceptor

    @​angular-devkit/build-angular

    Commit Type Description
    97716969c fix default preserve symlinks to Node.js value for esbuild
    cf2f30afc fix downlevel class fields with Safari <= v15 for esbuild
    25eaaa24b fix downlevel class properties when targeting Safari <=v15
    7a063238b fix explicitly send options to JS transformer workers
    ef99a68b4 fix prevent optimization adding unsupported ECMASCript features

    Special Thanks

    Alan Agius, Charles Lyding, Cédric Exbrayat, Dominic Elm, Doug Parker and Paul Gschwendtner

    15.0.3 (2022-12-07)

    ... (truncated)

    Commits
    • 8771258 release: cut the v15.0.4 release
    • 8e85f47 fix(@​angular-devkit/build-angular): update css-loader to 6.7.3
    • 9fd3562 fix(@​angular-devkit/build-angular): only set ngDevMode when script optimizati...
    • ccc8e03 fix(@​angular-devkit/build-angular): display actionable error when a style doe...
    • 507f756 fix(@​angular-devkit/build-angular): downlevel class private methods when targ...
    • b2d4415 fix(@​angular-devkit/build-angular): update locale setting snippet to use `glo...
    • a0da91d fix(@​angular-devkit/build-angular): include sources in generated
    • eb2a73a release: cut the v15.0.3 release
    • 3d9971e fix(@​angular-devkit/build-angular): default preserve symlinks to Node.js valu...
    • 24f4b51 fix(@​angular-devkit/build-angular): downlevel class fields with Safari <= v15...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 0
  • chore(deps): bump @angular/cdk from 14.2.7 to 15.0.3

    chore(deps): bump @angular/cdk from 14.2.7 to 15.0.3

    Bumps @angular/cdk from 14.2.7 to 15.0.3.

    Release notes

    Sourced from @​angular/cdk's releases.

    v15.0.3

    15.0.3 "velvet-village" (2022-12-14)

    material

    Commit Description
    fix - 80c4321ddd core: better handling of css variables in theme palettes (#26260)
    fix - 67db1a6043 form-field: allow getting harness by validity (#26232)
    fix - df7ac2709a form-field: prevent focus overlay stealing clicks (#26229)
    fix - 1e93df3ab3 menu: add selector for projecting non-Material icons (#26235)
    fix - 83825bd5c3 schematics: fix card tmpl migration (#26169)
    fix - ae3c77835a schematics: fix transform for FloatLabelType (#26234)
    fix - fee5d0b7d3 slider: avoid manual fixing values on pointer up (#26215)
    fix - 15c77e0950 tabs: allow both foreground and background colors to be set (#26212)
    fix - 0ca8c77349 toolbar: don't override colors of themed buttons (#26222)

    cdk

    Commit Description
    fix - 325475774f stepper: set focus origin when navigating with keyboard (#26239)

    Special Thanks

    Kristiyan Kostadinov, Miles Malerba, Ruslan Nevecheria and Wagner Maciel

    v15.0.2

    15.0.2 "polystyrene-penguin" (2022-12-08)

    material

    Commit Description
    fix - c388758606 button: ensure svg icon is centered (#26146)
    fix - afd6e1a277 chips: set correct cursor on interactive chips (#26171)
    fix - 639fa52ff1 dialog: change width to not cut off form field in component example (#26157)
    fix - 976562f35e form-field: allow ng-container to be used as prefix/suffix (#26127)
    fix - 0a617d6f0f list: remove previously removed API (#26165)
    fix - 679df1a074 schematics: some snack bar styles not being migrated (#26180)
    fix - 1ab52961b0 schematics: update flat button styles class name mapping (#26158)
    fix - 3bb07ae9d9 tabs: icons not centered inside tab (#26053)
    perf - 356aab723c core: delegate trigger events (#26147)
    perf - a526ede4af tabs: reduce amount of CSS generated for background color (#26186)

    cdk

    Commit Description
    fix - dac9e81f78 listbox: set initial focus to selected option (#26174)

    Special Thanks

    Amy Sorto, Kristiyan Kostadinov, Miles Malerba, Shauni and Wagner Maciel

    v15.0.1

    15.0.1 "gypsum-garland" (2022-11-30)

    material

    | Commit | Description |

    ... (truncated)

    Changelog

    Sourced from @​angular/cdk's changelog.

    15.0.3 "velvet-village" (2022-12-14)

    cdk

    Commit Type Description
    325475774f fix stepper: set focus origin when navigating with keyboard (#26239)

    material

    Commit Type Description
    80c4321ddd fix core: better handling of css variables in theme palettes (#26260)
    67db1a6043 fix form-field: allow getting harness by validity (#26232)
    df7ac2709a fix form-field: prevent focus overlay stealing clicks (#26229)
    1e93df3ab3 fix menu: add selector for projecting non-Material icons (#26235)
    83825bd5c3 fix schematics: fix card tmpl migration (#26169)
    ae3c77835a fix schematics: fix transform for FloatLabelType (#26234)
    fee5d0b7d3 fix slider: avoid manual fixing values on pointer up (#26215)
    15c77e0950 fix tabs: allow both foreground and background colors to be set (#26212)
    0ca8c77349 fix toolbar: don't override colors of themed buttons (#26222)

    Special Thanks

    Kristiyan Kostadinov, Miles Malerba, Ruslan Nevecheria and Wagner Maciel

    15.1.0-next.1 "polycarbonate-parrot" (2022-12-08)

    cdk

    Commit Type Description
    f99af6d044 fix listbox: set initial focus to selected option (#26174)

    material

    Commit Type Description
    1d2d7e11c3 fix button: ensure svg icon is centered (#26146)
    33f704c01e fix chips: set correct cursor on interactive chips (#26171)
    93818e5338 fix dialog: change width to not cut off form field in component example (#26157)
    b3da94a094 fix form-field: allow ng-container to be used as prefix/suffix (#26127)
    5b57863702 fix list: align color scheme between single and multi selection list (#26074)
    3d298e0fb7 fix list: remove previously removed API (#26165)
    a007b92ebd fix schematics: some snack bar styles not being migrated (#26180)
    1a8d04189f fix schematics: update flat button styles class name mapping (#26158)
    7b98f1af1a fix tabs: icons not centered inside tab (#26053)
    efb7f2ee9f perf core: delegate trigger events (#26147)
    8719700f72 perf tabs: reduce amount of CSS generated for background color (#26186)

    Special Thanks

    Amy Sorto, Kristiyan Kostadinov, Miles Malerba, Shauni and Wagner Maciel

    15.0.2 "polystyrene-penguin" (2022-12-08)

    cdk

    ... (truncated)

    Commits
    • a9f3b79 release: cut the v15.0.3 release
    • 80c4321 fix(material/core): better handling of css variables in theme palettes (#26260)
    • 9c61342 refactor(cdk/listbox): convert all directives to standalone (#26211)
    • 97c95e6 refactor(cdk/scrolling): switch directives to standalone (#26236)
    • 67db1a6 fix(material/form-field): allow getting harness by validity (#26232)
    • fee5d0b fix(material/slider): avoid manual fixing values on pointer up (#26215)
    • 1e93df3 fix(material/menu): add selector for projecting non-Material icons (#26235)
    • 3254757 fix(cdk/stepper): set focus origin when navigating with keyboard (#26239)
    • 0ca8c77 fix(material/toolbar): don't override colors of themed buttons (#26222)
    • 83825bd fix(material/schematics): fix card tmpl migration (#26169)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 0
Releases(v4.1.1)

  • v4.1.1(Dec 7, 2022)

  • v4.1.0(Dec 2, 2022)

  • v4.0.2(Nov 23, 2022)

  • v4.0.1(Sep 21, 2022)

    What’s Changed

    • chore(deps-dev): bump @types/luxon from 2.3.2 to 3.0.1 (#1484) @dependabot
    • chore(deps-dev): bump @types/node from 16.11.43 to 18.7.18 (#1490) @dependabot
    • chore(deps-dev): bump ts-node from 10.8.2 to 10.9.1 (#1451) @dependabot
    • chore(deps): bump highlight.js from 11.5.1 to 11.6.0 (#1452) @dependabot
    • chore(deps-dev): bump typescript from 4.7.4 to 4.8.3 (#1496) @dependabot
    • Added generateColors config flag (#1495) @santam85
    • Added missing @angular/cdk peer dependency for schematics (#1495) @santam85
    • chore(deps-dev): bump @typescript-eslint/parser from 5.30.5 to 5.30.6 (#1445) @dependabot
    • chore(deps): bump rxjs from 7.5.5 to 7.5.6 (#1446) @dependabot
    • chore(deps-dev): bump eslint from 8.19.0 to 8.20.0 (#1448) @dependabot
    • chore(deps): bump core-js from 3.23.3 to 3.23.5 (#1449) @dependabot

    Essential Links

    Thanks to @dependabot, @dependabot[bot] and @santam85

    Source code(tar.gz)
    Source code(zip)
    ng2-charts-4.0.1.tgz(38.58 KB)

  • v4.0.0(Jul 14, 2022)

  • v3.1.2(Jul 8, 2022)

    What’s Changed

    • Fix #1419
    • chore(deps): bump actions/setup-node from 2 to 3 (#1426) @dependabot
    • chore(deps): bump actions/download-artifact from 2 to 3 (#1427) @dependabot
    • chore(deps): bump actions/upload-artifact from 2 to 3 (#1425) @dependabot
    • chore(deps): bump actions/checkout from 2 to 3 (#1424) @dependabot
    • chore(deps): bump actions/cache from 2 to 3 (#1423) @dependabot

    Essential Links

    Thanks to @dependabot, @dependabot[bot] and @santam85

    Source code(tar.gz)
    Source code(zip)
    ng2-charts-3.1.2.tgz(25.70 KB)

  • v3.1.1(Jul 8, 2022)

  • v3.1.0(Jun 29, 2022)

  • v3.0.11(May 10, 2022)

    What’s Changed

    • Fixed issue discussed in #1376, library is compatible again with RxJs <7.1
    • chore(deps): bump async from 2.6.3 to 2.6.4 (#1404) @dependabot
    • chore(deps): bump plist from 3.0.4 to 3.0.5 (#1397) @dependabot
    • chore(deps): bump ejs from 3.1.6 to 3.1.7 (#1403) @dependabot

    Essential Links

    Thanks to @dependabot, @dependabot[bot] and @santam85

    Source code(tar.gz)
    Source code(zip)
    ng2-charts-3.0.11.tgz(33.32 KB)

  • v3.0.10(Apr 29, 2022)

  • v3.0.9(Apr 11, 2022)

    What’s Changed

    • chore(deps): bump minimist from 1.2.5 to 1.2.6 (#1396) @dependabot
    • chore(deps): bump engine.io from 6.1.0 to 6.1.3 (#1387) @dependabot
    • chore(deps): bump nanoid from 3.1.30 to 3.3.1 (#1388) @dependabot
    • chore(deps): bump follow-redirects from 1.14.6 to 1.14.8 (#1382) @dependabot
    • chore(deps): bump prismjs from 1.25.0 to 1.27.0 (#1384) @dependabot
    • chore(deps-dev): bump karma from 6.3.9 to 6.3.16 (#1385) @dependabot

    Essential Links

    Thanks to @dependabot, @dependabot[bot] and @santam85

    Source code(tar.gz)
    Source code(zip)
    ng2-charts-3.0.9.tgz(33.21 KB)

  • v3.0.8(Jan 17, 2022)

  • v3.0.7(Jan 14, 2022)

  • v3.0.6(Jan 5, 2022)

  • v3.0.5(Dec 22, 2021)

  • v3.0.2(Dec 17, 2021)

  • v3.0.1(Dec 7, 2021)

  • v3.0.0(Dec 6, 2021)

    What’s Changed

    • v3.0.0 release (#1345) @santam85
    • Updated to Angular 13
    • Updated to Chart.js 3.6.0
    • Switched to Chart.js types
    • Fix typo on AppComponent by @KevinPy in #1290
    • Fix rounding in bar chart example by @FuchsDominik in #1332

    New Contributors @KevinPy made their first contribution in #1290 @PowerKiKi made their first contribution in #1322 @FuchsDominik made their first contribution in #1332

    Essential Links

    Thanks to @santam85, @paviad, @KevinPy, @PowerKiKi, @FuchsDominik

    Source code(tar.gz)
    Source code(zip)
    ng2-charts-3.0.0.tgz(697.02 KB)

  • v3.0.0-rc.7(Oct 22, 2021)

    What's Changed

    • Moved chart creation outside of Angular zone
    • Removed checks for loading the NgChart module a single time
    • Bumped minimum Angular version requirement to v11
    • Refactored generation schematics to use newer CDK APIs
    • Fix rounding in bar chart example by @FuchsDominik in https://github.com/valor-software/ng2-charts/pull/1332
    • Bump tar from 6.1.0 to 6.1.3 by @dependabot in https://github.com/valor-software/ng2-charts/pull/1330

    New Contributors

    • @FuchsDominik made their first contribution in https://github.com/valor-software/ng2-charts/pull/1332

    Full Changelog: https://github.com/valor-software/ng2-charts/compare/v3.0.0-rc.5...v3.0.0-rc.7

    Source code(tar.gz)
    Source code(zip)

  • v3.0.0-rc.5(Aug 6, 2021)

  • v2.4.3(Jul 7, 2021)

  • v3.0.0-rc.4(Jul 6, 2021)

  • v3.0.0-rc.3(Jun 14, 2021)

  • v3.0.0-rc.2(May 21, 2021)

  • 2.4.0(Aug 25, 2020)

  • v3.0.0-beta.1(Mar 20, 2019)

    3.0.0-beta - Introduce strong typings

    Table of Content

    Goal Application Chart Meta Configuration Class Application Chart Configuration File Integrating It All Schematics Usage

    Goal

    The goal of this version is to provide strong typings for every type in the chart.js domain. Right now, many properties are not typed (or typed any) and this puts a lot of unnecessary work in writing code for configuration options.

    Additionally, plugins and extensions are allowed to extend the configuration options structure in many ways (add properties to options add properties to data.datasets[] add new chart types, or scale types, etc...). The typing problem becomes worse when plugins and extensions are also brought into the game.

    For the chart.js package itself I've reworked all the typings, specifically:

    1. The datasets for the different chart type (previously ChartDataSets) are now in separate classes (ChartDataSetsLine, ChartDataSetsBar, etc.)
    2. The classes describing the scales - CommonAxe and its derived classes - have been changed and rearranged to provide better protection against incompatible properties for the scale types (also, class names have changed).
    3. Many callback signatures have been updated with specific types.

    With regards to extensions and plugins, I've decided to approach the issue using generics. The basic idea is to impose a requirement on application developers to provide a "meta configuration" for their chart environment. This meta configuration will include all the ways in which configuration options are extended in a central place following the DRY principle. Angular CLI schematics have been created to assist in generating this boiler plate.

    Application Chart Meta Configuration Class

    This meta configuration comes in the form of a class (defined in the application, not in the library) which has specially named fields with types describing the extensions for the chart.js various option types. Example:

    import * as ng2Charts from 'ng2-charts';
import { ChartDataSetsFoo, FooScale } from 'foo-plugin';
import { DataLabelsOptions } from 'chartjs-plugin-datalabels';
import { AnnotationOptions} from 'chartjs-plugin-annotation';

export interface AppChartMetaConfig extends ng2Charts.BaseChartMetaConfig {
  datasetTypes: ng2Charts.ChartMetaConfig['datasetTypes'] | ChartDataSetsFoo;
  scaleTypes: ng2Charts.ChartMetaConfig['scaleTypes'] | FooScale;
  pluginOptions: {
    datalabels?: DataLabelsOptions;
  };
  additionalOptions: {
    annotation?: AnnotationOptions;
  };
}

    Breaking down the above example:

    The imports section describes a theoretical set of imports from various extensions:

    1. The foo plugin which defines a new chart type and a new scale type.
    2. The datalabels plugin which defines a set of options (the plugin does exist, but the options type does not, this is why this is all still theoretical)
    3. The annotation plugin which similarly defines a set of options, however this plugin plugs its options not to options.plugins but directly to options itself.

    Application Chart Configuration File

    Once this meta configuration type is defined, other types are defined while using this meta config as a generic type argument. This is, again, boilerplate which is generated by the schematics:

    import * as ng2Charts from 'ng2-charts';
import { AppChartMetaConfig } from './app-chart-meta-config';
export { AppChartMetaConfig } from './app-chart-meta-config';
export {
  ChartsModule,
  Color,
  Colors,
  defaultColors,
  ChartType,
  ChartDataSetsBase,
  ChartDataSetsUnion,
  BaseChartMetaConfig,
  ChartMetaConfig,
  LegacyMetaConfig,
  PromiscuousMetaConfig,
  LinearScale,
  LogarithmicScale,
  CategoryScale,
  CartesianScale,
  RadialScale,
  RadialLinearScale,
  ScaleUnion,
  ThemeService,
  BaseChartDirective,
  Label,
} from 'ng2-charts';

export type AngularChart = ng2Charts.AngularChart<AppChartMetaConfig>;
export type ChartOptions = ng2Charts.ChartOptions<AppChartMetaConfig> & AppChartMetaConfig['additionalOptions'];
export type ChartDataSetsBar = ng2Charts.ChartDataSetsBar<AppChartMetaConfig>;
export type ChartDataSetsLine = ng2Charts.ChartDataSetsLine<AppChartMetaConfig>;
export type ChartDataSetsDoughnut = ng2Charts.ChartDataSetsDoughnut<AppChartMetaConfig>;
export type ChartDataSetsRadar = ng2Charts.ChartDataSetsRadar<AppChartMetaConfig>;
export type ChartDataSetsBubble = ng2Charts.ChartDataSetsBubble<AppChartMetaConfig>;
export type ChartDataSetsScatter = ng2Charts.ChartDataSetsScatter<AppChartMetaConfig>;
export type MultiDataSet = ng2Charts.MultiDataSet<AppChartMetaConfig>;
export type SingleDataSet = ng2Charts.SingleDataSet<AppChartMetaConfig>;

    Integrating It All

    As a final step, the application developer now imports all types from this config file, and not from ng2-charts or from chart.js. Example:

    import { Component, OnInit, ViewChild } from '@angular/core';
import * as pluginAnnotations from 'chartjs-plugin-annotation';
import {
  AppChartMetaConfig,
  ChartDataSetsLine,
  ChartOptions,
  Color,
  Label,
  BaseChartDirective
} from '../app-chart-config';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.scss']
})
export class LineChartComponent implements OnInit {
  public lineChartData: ChartDataSetsLine[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
    { data: [180, 480, 770, 90, 1000, 270, 400], label: 'Series C', yAxisID: 'y-axis-1' }
  ];
  public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartOptions: ChartOptions = {
...

    Schematics Usage

    Example usage

    1. Create a minimal angular app
    ng new --minimal myApp
    1. Install packages
    npm install --save ng2-charts chart.js ng2-charts-schematics
    1. Generate a line chart
    ng generate ng2-charts-schematics:line my-line-chart

    The output of the generate command is:

    CREATE src/app/my-line-chart/my-line-chart.component.html (317 bytes)
CREATE src/app/my-line-chart/my-line-chart.component.spec.ts (665 bytes)
CREATE src/app/my-line-chart/my-line-chart.component.ts (923 bytes)
CREATE src/app/my-line-chart/my-line-chart.component.css (0 bytes)
CREATE src/app/app-chart-config.ts (1604 bytes)
CREATE src/app/app-chart-meta-config.ts (402 bytes)
UPDATE src/app/app.module.ts (513 bytes)

    The command calls Angular's schematics to generate a component as normal, then replaces the code of the component class with the code for a line chart. It also adds the ng2-charts ChartsModule to the module's imports section, and generates the meta config class and config file (if they did not exist already).

    Source code(tar.gz)
    Source code(zip)

  • v1.0.2(Apr 13, 2016)

Owner
Valor Software
Leader in the Angular development space since 2013. Creators of ngx-bootstrap. We provide design, architecture, engineering, product guidance and open source.
Valor Software
GitHub http://valor-software.github.io/ng2-charts/
J2CL and GWT Charts library based on CHART.JS

Charba - J2CL and GWT Charts library based on CHART.JS What's Charba GWT Web toolkit doesn't have charting library available out of the box. There are

Pepstock.org 56 Dec 17, 2022
Beautiful and interactive javascript charts for Java-based web applications.

Wicked Charts Beautiful and interactive JavaScript charts for Java-based web applications. Check out the Changelog Check out the Feature Overview with

adesso SE 85 Aug 23, 2022
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching ch

Joe Walnes 2.2k Dec 13, 2022
Chart.js plugin to create charts with a hand-drawn, sketchy, appearance

chartjs-plugin-rough Chart.js plugin to create charts with a hand-drawn, sketchy, appearance Version 0.2 requires Chart.js 2.7.0 or later, and Rough.j

Akihiko Kusanagi 73 Dec 1, 2022
Chart.js module for creating treemap charts

chartjs-chart-treemap Chart.js v3.6.0 module for creating treemap charts. Implementation for Chart.js v2 is in 2.x branch Documentation You can find d

Jukka Kurkela 99 Dec 18, 2022
Chart.js Box Plots and Violin Plot Charts

Chart.js Box and Violin Plot Chart.js module for charting box and violin plots. This is a maintained fork of @datavisyn/chartjs-chart-box-and-violin-p

Samuel Gratzl 61 Dec 14, 2022
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Jan 2, 2023
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 2022
Create beautiful JavaScript charts with one line of Ruby

Chartkick Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries! See it in action Chartkick 4.0 was recen

Andrew Kane 6.1k Jan 8, 2023
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 2, 2023
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 6, 2023
Django Class Based Views to generate Ajax charts js parameters.

Django Chartjs Django Chartjs lets you manage charts in your Django application. This is compatible with Chart.js and Highcharts JS libraries. Using a

PeopleDoc 377 Dec 25, 2022
:bar_chart: A D3-based reusable chart library

c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http

C3.js 9.2k Jan 2, 2023
:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic

NAVER 5.4k Jan 1, 2023
API to generate candlestick chart data for any time period based on transactions data

candel-maker API to generate candlestick chart data for any time period based on transactions data Installation clone repo git clone https://github.co

null 2 Aug 18, 2022