Description

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.

NPM

Install @swimlane/ngx-charts using npm

@swimlane/ngx-charts

npm install @swimlane/ngx-charts --save

Dependencies

Install d3 using npm

d3

npm install d3 --save

Install @types/d3-shape using npm

@types/d3-shape

npm install @types/d3-shape --save

Charts Module

Add NgxChartsModule into your ChartsNg2Module class. charts.module.ts would look like this


import {NgModule} from '@angular/core';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { NGXChartsComponent } from "./ngx-charts/ngx-charts.component";

@NgModule({
imports: [NgxChartsModule],
declarations: [NGXChartsComponent],
providers: [ ],
})
export class ChartsNg2Module { }

ngx-charts Components

import ngx-charts.config.ts and ngxChart.ts data file in NGXChartsComponent class. ngx-charts.component.ts would look like this 


import { Component } from '@angular/core';
import { lineChartMulti} from '../../shared/data/ngxChart';
import * as chartsData from '../../shared/configs/ngx-charts.config';

@Component({
    selector: 'app-ngx',
    templateUrl: './ngx-charts.component.html'
})
export class NGXChartsComponent {

    lineChartMulti = lineChartMulti;
    //Line Charts

    lineChartView: any[] = chartsData.lineChartView;

    // options
    lineChartShowXAxis = chartsData.lineChartShowXAxis;
    lineChartShowYAxis = chartsData.lineChartShowYAxis;
    lineChartGradient = chartsData.lineChartGradient;
    lineChartShowLegend = chartsData.lineChartShowLegend;
    lineChartShowXAxisLabel = chartsData.lineChartShowXAxisLabel;
    lineChartXAxisLabel = chartsData.lineChartXAxisLabel;
    lineChartShowYAxisLabel = chartsData.lineChartShowYAxisLabel;
    lineChartYAxisLabel = chartsData.lineChartYAxisLabel;

    lineChartColorScheme = chartsData.lineChartColorScheme;

    // line, area
    lineChartAutoScale = chartsData.lineChartAutoScale;
    lineChartLineInterpolation = chartsData.lineChartLineInterpolation;

    constructor() {
        Object.assign(this, { lineChartMulti })
    }

    onSelect(event) {
        console.log(event);
    }

}

ngx-charts Markup

ngx-charts.component.html would look like this 


<ngx-charts-line-chart [scheme]="lineChartColorScheme" [results]="lineChartMulti" [gradient]="lineChartGradient" [xAxis]="lineChartShowXAxis"
[yAxis]="lineChartShowYAxis" [legend]="lineChartShowLegend" [showXAxisLabel]="lineChartShowXAxisLabel"
[showYAxisLabel]="lineChartShowYAxisLabel" [xAxisLabel]="lineChartXAxisLabel" [yAxisLabel]="lineChartYAxisLabel"
[autoScale]="lineChartAutoScale" [curve]="lineChartLineInterpolation" (select)="onSelect($event)"> </ngx-charts-line-chart>

ngx-charts Configuration

Import d3-shape in ngx-charts.config.ts. ngx-charts.config.ts would look like this: 



import * as shape from 'd3-shape';

//Line Charts

export var lineChartView: any[] = [550, 400];

// options
export var lineChartShowXAxis = true;
export var lineChartShowYAxis = true;
export var lineChartGradient = false;
export var lineChartShowLegend = false;
export var lineChartShowXAxisLabel = true;
export var lineChartXAxisLabel = 'Country';
export var lineChartShowYAxisLabel = true;
export var lineChartYAxisLabel = 'Population';

export var lineChartColorScheme = {
    domain: ['#1CBCD8', '#FF8D60', '#FF586B', '#AAAAAA']
};

// line, area
export var lineChartAutoScale = true;
export var lineChartLineInterpolation = shape.curveBasis;

ngx-charts Data

ngxChart.ts would look like this 


export var lineChartMulti = [
{
    "name": "Germany",
    "series": [
    {
        "name": "2010",
        "value": 700
    },
    {
        "name": "2011",
        "value": 750
    },
    {
        "name": "2012",
        "value": 775
    },
    {
        "name": "2013",
        "value": 725
    },
    {
        "name": "2014",
        "value": 750
    },
    {
        "name": "2015",
        "value": 800
    },
    {
        "name": "2016",
        "value": 860
    }
    ]
},

Refer following links for usage:

Type URL
Plugin Github Page https://github.com/swimlane/ngx-charts
Template Page https://demos.pixinvent.com/apex-angular-admin-template/demo-1/charts/ngx