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 { LinechartsComponent } from './linecharts/linecharts.component';

@NgModule({
imports: [ChartistModule],
declarations: [LinechartsComponent],
providers: [ ],                       
})
export class LinechartsComponent implements OnInit { }
            

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

import { Component, OnInit } from '@angular/core';
import * as Chartist from 'chartist';
import { ChartEvent, ChartType } from 'ng-chartist';

data: any = require('../../../../../assets/data/chartist/charts/chartist.json');

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

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

export class LinechartsComponent implements OnInit{

    barChart: Chart = {
        type: 'Bar',
        data: this.data['Bar'],
        options: {
          fullwidth: true,
          height: '350px',
          seriesBarDistance: 21,
          axisX: {
            showGrid: false, offset: 100
          },
    
          axisY: {
            scaleMinSpace: 30,
          }
        },
      };
  }
            

linecharts.component.html would look like this

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

chartist.json would look like this

 {  
  "Bar": {
    "labels": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "June",
      "July",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ],
    "series": [
      [
        5,
        4,
        3,
        7,
        6,
        7,
        3,
        9,
        9,
        6,
        2,
        7
      ],
      [
        3,
        6,
        10,
        5,
        7,
        3,
        8,
        5,
        7,
        5,
        9,
        3
      ]
    ]
  },
    }
                    

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

import { Component, OnInit } from '@angular/core';
import * as Chartist from 'chartist';
import { ChartEvent, ChartType } from 'ng-chartist';

const ChartistData = require('../../../../assets/data/dashboard/ecommerce/chartist.json');

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

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

export class EcommerceComponent implements OnInit {
    lineArea: Chart = {
        type: 'Line',
        data: ChartistData['lineArea'],
          options: {
          lineSmooth: Chartist.Interpolation.simple({
          divisor: 1.8
        }),
        
          fullwidth: true,
          height: '320px',
          low: 0,
          showArea: true,
          fullWidth: true,
          showPoint: false,
          axisX: {
            showGrid: false,
            },
          axisY: {
            low: 0,
            offset : 16,
            scaleMinSpace: 40,
            labelInterpolationFnc: function (value) {
              return value + 'K';
            },
          },
        },
        responsiveOptions: [
          ['screen and (max-width: 640px) and (min-width: 200px)', {
            axisX: {
              labelInterpolationFnc: function (value, index) {
                return index % 2 === 0 ? value : null;
              }
            }
          }],
          ['screen and (max-width: 380px)', {
            axisX: {
              labelInterpolationFnc: function (value, index) {
                return index % 3 === 0 ? value : null;
              }
            }
          }]
        ],
        events: {
          created(data: any): void {
            const defs = data.svg.elem('defs');
            defs.elem('linearGradient', {
              id: 'gradient2',
              x1: 1,
              y1: 1,
              x2: 1,
              y2: 1
            }).elem('stop', {
              offset: 0,
              'stop-color': 'rgba(22, 141, 238, 1)'
            }).parent().elem('stop', {
              offset: 1,
              'stop-color': 'rgba(98, 188, 270, 11)'
            });
          },
        },
      };
    
            

ecommerce.component.html would look like this

<div class="areaChartLegend scoreLineShadow">
        <x-chartist [data]="lineArea.data" [type]="lineArea.type" [options]="lineArea.options"
         [responsiveOptions]="lineArea.responsiveOptions" [events]="lineArea.events">
        </x-chartist>
    </div>




                    

ecommerce.component.css would look like this

        
                .areaChartLegend .ct-series-a .ct-line {
                    stroke: url(#gradient2);
                    stroke-width: 5px;
                    stroke-linecap: round;
                }
                .areaChartLegend .ct-series-a .ct-area {
                    fill: #ffffff;
                }
                .areaChartLegend .ct-series-a .ct-line {
                    stroke: #3da2ea;
                }
             
        
                            

chartist.json would look like this

    {
          "lineArea": {
            "labels": ["1st","2nd","3rd","4th","5th","6th","7th","8th"],
            "series": [
              [
                0,
                4.5,
                2.6,
                6.1,
                2.6,
                6.5,
                3.2,
                6.8
              ]
            ]
          },
    }