ApexCharts

There are few options on how to include/import ApexCharts into your project:

Install from NPM

Install the ApexCharts library using command prompt from the root directory of the project:

yarn add apexcharts

How to import ApexCharts package?

import ApexCharts from '../../libs/apexcharts/apexcharts.esm.js'

Check the below example how to use and make it working ApexCharts on any page.

JavaScript

import ApexCharts from '../../libs/apexcharts/apexcharts.esm.js'

// common functions to all charts to re-render and update charts based on changes in layouts

// Basic Charts
var options = {
    series: [{
        name: 'series1',
        data: [31, 40, 28, 51, 42, 109, 100]
    }],
    labels: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan', '08 Jan', '09 Jan', '10 Jan', '11 Jan', '12 Jan'],
    chart: {
        defaultLocale: "en",
        height: 300,
        type: "area",
        zoom: {
            enabled: false
        },
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        width: [5, 7, 5],
        curve: 'straight',
        dashArray: [0, 8, 5]
    },
    title: {
        text: 'Page Statistics',
        align: 'left'
    },
    legend: {
        tooltipHoverFormatter: function (val, opts) {
            return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
        }
    },
    markers: {
        size: 0,
        hover: {
            sizeOffset: 6
        }
    },
    grid: {
        padding: {
            top: -20,
            right: 0,
            bottom: 0,
        },
    },
    tooltip: {
        y: [
            {
                title: {
                    formatter: function (val) {
                        return val + " (mins)"
                    }
                }
            },
            {
                title: {
                    formatter: function (val) {
                        return val + " per session"
                    }
                }
            },
            {
                title: {
                    formatter: function (val) {
                        return val;
                    }
                }
            }
        ]
    },
    colors: ["--dx-primary"],
};

allCharts.push([{ 'id': 'basicAreaChart', 'data': options }]);

window.addEventListener('DOMContentLoaded', () => {
    updateAllCharts();
});

window.addEventListener('resize', () => { setTimeout(() => { updateAllCharts(); }, 0) });