Install ng-chartist using npm

ng-chartist

npm install ng-chartist --save

Install chartist using npm

chartist

npm install chartist --save

Install @types/chartist using npm

@types/chartist

npm install @types/chartist --save-dev

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

import {NgModule} from '@angular/core';
import { ChartistModule} from 'ng-chartist';
import { ChartistComponent } from "./chartist/chartist.component";

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

import chartist, chartist.component and chartist.json for data in ChartistComponent class. chartist.component.ts would look like this

import { Component, ViewEncapsulation } from '@angular/core';
import * as Chartist from 'chartist';
import { ChartType, ChartEvent } from "ng-chartist/dist/chartist.component";

const data: any = require('../../shared/data/chartist.json');

export interface Chart {
    type: ChartType;
    data: Chartist.IChartistData;
    options?: any;
    responsiveOptions?: any;
    events?: ChartEvent;
}

@Component({
    selector: 'app-chartist',
    templateUrl: './chartist.component.html'
})

export class ChartistComponent {

    barChart1: Chart = {
        type: 'Bar',
        data: data['Bar'],
        options: {
            seriesBarDistance: 21,
            axisX: {
                showGrid: false, offset: 100
            }
        },
        responsiveOptions: [
            [
                'screen and (min-width: 640px)',
                {
                    axisX: {
                        labelInterpolationFnc: function (value: number, index: number): string {
                            return index % 4 === 0 ? `W${value}` : null;
                        }
                    }
                }
            ]
        ]
    };

}
            

chartist.component.html would look like this

<chartist class="" [data]="barChart1.data" [type]="barChart1.type" [options]="barChart1.options" [responsiveOptions]="barChart1.responsiveOptions"
[events]="barChart1.events"> </x-chartist>
                    

    {
        "Bar": {
            "labels": [
            "Jan",
            "Feb",
            "Mar",
            "Apr"

            ],
            "series": [
            [
                5,
                4,
                3,
                7

            ],
            [
                3,
                2,
                9,
                5

            ]
            ]
        },
    }
                    

You can provide class like here we have given lineChart1Shadow to a Div tag in your Markup file. All other pages code will remain same as what we have explained above.

    

        <div id="line-chart1" class="height-350 lineChart1 lineChart1Shadow">
                <x-chartist class="" [data]="lineChart1.data" [type]="lineChart1.type" [options]="lineChart1.options"
                    [responsiveOptions]="lineChart1.responsiveOptions" [events]="lineChart1.events">
                </x-chartist>
            </div>

    
                        

your style file would look like this

        

                .lineChart1Shadow {
                    -webkit-filter: drop-shadow( 0px 20px 6px rgba(0,0,0,0.3) );
                            filter: drop-shadow( 0px 20px 6px rgba(0,0,0,0.3) );
                }

        
                            

import chartist, chartist.component and chartist.json for data in Dashboard1Component class. Dashboard1.component.ts would look like this

import { Component, ViewEncapsulation } from '@angular/core';
import * as Chartist from 'chartist';
import { ChartType, ChartEvent } from "ng-chartist/dist/chartist.component";

const data: any = require('../../shared/data/chartist.json');

export interface Chart {
    type: ChartType;
    data: Chartist.IChartistData;
    options?: any;
    responsiveOptions?: any;
    events?: ChartEvent;
}

@Component({
    selector: 'app-chartist',
    templateUrl: './chartist.component.html'
})

export class Dashboard1Component {

    lineArea: Chart = {
        type: 'Line',
        data: data['lineAreaDashboard'],
        options: {
            low: 0,
            showArea: true,
            fullWidth: true,
            onlyInteger: true,
            axisY: {
                low: 0,
                scaleMinSpace: 50,
            },
            axisX: {
                showGrid: false
            }
        },
        events: {
            created(data: any): void {
                var defs = data.svg.elem('defs');
                defs.elem('linearGradient', {
                    id: 'gradient',
                    x1: 0,
                    y1: 1,
                    x2: 1,
                    y2: 0
                }).elem('stop', {
                    offset: 0,
                    'stop-color': 'rgba(0, 201, 255, 1)'
                }).parent().elem('stop', {
                    offset: 1,
                    'stop-color': 'rgba(146, 254, 157, 1)'
                });

                defs.elem('linearGradient', {
                    id: 'gradient1',
                    x1: 0,
                    y1: 1,
                    x2: 1,
                    y2: 0
                }).elem('stop', {
                    offset: 0,
                    'stop-color': 'rgba(132, 60, 247, 1)'
                }).parent().elem('stop', {
                    offset: 1,
                    'stop-color': 'rgba(56, 184, 242, 1)'
                });
            },

        },
    };
            

dashboard1.component.html would look like this

<div id="line-area" class="height-350 lineArea">
        <x-chartist [data]="lineArea.data" [type]="lineArea.type" [options]="lineArea.options"
         [responsiveOptions]="lineArea.responsiveOptions" [events]="lineArea.events">
        </x-chartist>
    </div>




                    

dashboard1.component.scss would look like this

        
                .lineArea .ct-series-a .ct-area {
                    fill-opacity: 0.7;
                    fill:url(#gradient1) !important;
                }

                 .lineArea .ct-series-b .ct-area {
                    fill: url(#gradient) !important;
                    fill-opacity: 0.9;
                }
                 .lineArea .ct-line{
                    stroke-width: 0px;
                }
                 .lineArea .ct-point {
                    stroke-width: 0px;
                }

        

                            

    {
        "lineAreaDashboard": {
            "labels": [
              1,
              2,
              3,
              4,
              5,
              6,
              7,
              8
            ],
            "series": [
              [
                0,
                20,
                10,
                45,
                20,
                36,
                21,
                0
              ],
              [
                0,
                5,
                22,
                14,
                32,
                12,
                28,
                0
              ]
            ]
          },
    }