admin

Please wait...

insert_chart ngx-charts Overview

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.

Step 1: Install 
npm install @swimlane/ngx-charts --save

extension Dependencies

You'll need to install ngx-chart dependencies:

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

settings Setup

To use ngx-charts in your project, import the NgxChartsModule into your application module: 

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

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

code Ngx-Charts Components

The 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
    }
  ];

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

Template Markup

The ngxchart.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>

link Referral Url

Type URL
Official Website https://swimlane.github.io/ngx-charts/