Apexchart

ApexCharts is loaded with powerful features to fulfill your data-visualization needs. Look at some of the key features of ApexCharts. For more details

Installing via npm
npm install apexcharts --save
Direct <script> include

Another way is to directly include it in your html

import { ApexChart } from "ng-apexcharts";
angular Code
<apx-chart *ngIf="chartShow" id="bar_apexcharts" [series]="chart1.series" [chart]="chart1.chart"
          [xaxis]="chart1.xaxis" [yaxis]="chart1.yaxis" [legend]="chart1.legend" [dataLabels]="chart1.dataLabels"
          [grid]="chart1.grid" [stroke]="chart1.stroke" [title]="chart1.title" [colors]="chart1.colors"
          [plotOptions]="chart1.plotOptions" [responsive]="chart1.responsive" [markers]="chart1.markers">
      </apx-chart>
Script

    chart1: Partial<ChartOptions> | any = {
    chart: {
      type: 'bar',
      height: 350
    },
    colors: this.colors,
    plotOptions: {
      bar: {
        horizontal: true,
        dataLabels: {
          position: 'top',
        },
      }
    },
    dataLabels: {
      enabled: true,
      offsetX: -6,
      style: {
        fontSize: '12px',
      }
    },
    stroke: {
      show: true,
      width: 1,
    },
    tooltip: {
      shared: true,
      intersect: false
    },
    xaxis: {
      categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],
    },
    series: [{
      data: [44, 55, 41, 64, 22, 43, 21]
    }, {
      data: [53, 32, 33, 52, 13, 44, 32]
    }],
  }
Live Customizer Next