Declarative Charting Framework for Angular2 and beyond!

ngx-charts is unique because we don't merely wrap d3, nor any other chart engine for that matter. It is using Angular to render and animate the SVG elements with all of its binding and speed goodness, and uses d3 for the excellent math functions, scales, axis and shape generators, etc. By having Angular do all of the rendering it opens us up to endless possibilities the Angular platform provides such as AoT, Universal, etc.

Install

---

                         	
npm install @swimlane/ngx-charts --save
							
						

you'll need to install ngx-chart Dependencies:

                         	
npm install d3 --save
npm install @types/d3-shape --save
							
						

After Installing, include NgxChartsModule in your ChartsModule class in chart.module.ts would look like this:

---

                                    
import { NgxChartsModule } from '@swimlane/ngx-charts';

@NgModule({
  imports: [
    ...,
    NgxChartsModule
  ],
})
export class ChartsModule { }

							
						

NgxchartComponent class in ngxchart.component.ts would look like this

---

                                    
import { Component, OnInit } from '@angular/core';
import * as shape from 'd3-shape';

@Component({
  selector: 'app-ngxchart',
  templateUrl: './ngxchart.component.html',
  styleUrls: ['./ngxchart.component.sass']
})
export class NgxchartComponent {

	constructor() { }                    	
 // common options for all charts
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = false;
  showXAxisLabel = true;
  showYAxisLabel = true;
  legendPosition = 'right';
  timeline = true;
  colorScheme = {
    domain: ['#9370DB', '#87CEFA', '#FA8072', '#FF7F50', '#90EE90', '#9370DB']
  };
  showLabels = true;


  // data goes here
  public single = [
    {
      "name": "China",
      "value": 2243772
    },
    {
      "name": "USA",
      "value": 1826000
    },
    {
      "name": "India",
      "value": 1173657
    },
    {
      "name": "Japan",
      "value": 857363
    },
    {
      "name": "Germany",
      "value": 496750
    },
    {
      "name": "France",
      "value": 204617
    }
  ];

// vaericle bar chart start
  vbarxAxisLabel = 'Country';
  vbaryAxisLabel = 'Sales';
  
    }
							
						

chartjs.component.html would look like this

---

                         	
 <ngx-charts-bar-vertical [scheme]="colorScheme" [results]="single" [gradient]="gradient"
	[xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend"
	[legendPosition]="legendPosition" [showXAxisLabel]="showXAxisLabel"
	[showYAxisLabel]="showYAxisLabel" [xAxisLabel]="vbarxAxisLabel"
	[yAxisLabel]="vbaryAxisLabel">
</ngx-charts-bar-vertical>
							
						

Type	URL
ngx-charts	https://swimlane.gitbook.io/ngx-charts/