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
Usage
import ApexCharts from'apexcharts'

OR

Direct <script> include

Another way is to directly include it in your html

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
HTML Code
<div id="chart"></div>
Script
const options = {
    series: [{
        name: 'total',
        data: [30, 60, 20,60,25, 80, 40, 94,80,85,70]
    }],
    chart: {
        fontFamily: '"Inter", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
        height: '100%',
        type: 'area',
        toolbar: {
            show: false
        },
        sparkline: {
            enabled: false,
        },
    },
    colors: ["#3a57e8"],
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'smooth',
        width: 3,
    },
    yaxis: {
      show: true,
        labels: {
            show: true,
            minWidth: 19,
            maxWidth: 19,
            style: {
            colors: "#8A92A6",
            },
            offsetX: -5,
        },
        axisBorder: {
            show: false,
        },
    },
    legend: {
        show: false,
    },
    xaxis: {
        labels: {
            minHeight:22,
            maxHeight:22,
            show: true,
            style: {
              colors: "#8A92A6",
            },
        },
        lines: {
            show: false  //or just here to disable only x axis grids
        },
        axisTicks: {
            show: false,
            
        },
        axisBorder: {
            show: false,
        },
        categories: ["Jan", "Feb", "Mar", "Apr", "Jun", "Jul", "Aug","Sep","Oct","Nov","Dec"]
    },
    grid: {
        show: true,
        strokeDashArray: 3,
    },
    responsive: [{
      breakpoint: 1399,
      options: {
        chart: {
          height:320
        }
      }
    }],
    fill: {
        type: 'gradient',
        gradient: {
            shade: 'dark',
            type: "vertical",
            shadeIntensity: 0,
            gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
            inverseColors: true,
            opacityFrom: .4,
            opacityTo: .1,
            stops: [0, 50, 80],
            colors: ["#3a57e8"]
        }
    },
    tooltip: {
      enabled: true,
    },
};
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
Script for chart color customizer change
document.addEventListener('theme_color', (e) => {
    let prefix = getComputedStyle(document.body).getPropertyValue('--prefix') || 'bs-';
    if (prefix) {
      prefix = prefix.trim()
    }
    const color1 = getComputedStyle(document.body).getPropertyValue(`--${prefix}primary`);
    const color2 = getComputedStyle(document.body).getPropertyValue(`--${prefix}info`);
    const colors = [color1.trim(), color2.trim()];

    const newOpt = {
      colors: colors,
      fill: {
        type: 'gradient',
        gradient: {
            shade: 'dark',
            type: "vertical",
            shadeIntensity: 0,
            gradientToColors: colors, // optional, if not defined - uses the shades of same color in series
            inverseColors: true,
            opacityFrom: .4,
            opacityTo: .1,
            stops: [0, 50, 60],
            colors: colors,
        }
    },
   }
    chart.updateOptions(newOpt)
})

Script for chart font customizer change

document.addEventListener('body_font_family',(e) =>{
  let prefix = getComputedStyle(document.body).getPropertyValue('--prefix') || 'bs-';
  if (prefix) {
    prefix = prefix.trim()
  }
  const font_1 = getComputedStyle(document.body).getPropertyValue(`--${prefix}body-font-family`);
  const fonts = [font_1.trim()];
  const newOpt = {
    chart: {
      fontFamily: fonts,
    }
  }
chart.updateOptions(newOpt)
})
Contents Next