ApexCharts

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

Install from NPM

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

npm install apexcharts --save

How to import ApexCharts package?

import ReactApexChart from 'react-apexcharts';

Import the helper function to manage the charts colors based on mode changes. It will take updated values from the root variables.

import useChartColors from '../../../js/hooks/useChartColors';

Below the example how to use the package and make it working ApexCharts on any page.

HTML

import React from 'react';
import { ApexOptions } from 'apexcharts';
import useChartColors from '../../../js/hooks/useChartColors';
import ReactApexChart from 'react-apexcharts';

interface AreaChartsProps {
    chartColors: string;
    chartDarkColors: string;
    chartId: string;
}

const BasicAreaChart = ({ chartColors, chartDarkColors, chartId }: AreaChartsProps) => {
    // Pass both chartColors and chartDarkColors to the hook
    const chartsColor = useChartColors({ chartColors, chartDarkColors });

    const series = [
        {
            name: 'series1',
            data: [31, 40, 28, 51, 42, 109, 100]
        }
    ];

    const options: ApexOptions = {
        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: string, opts: any) {
                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: string) {
                            return val + " (mins)";
                        }
                    }
                },
                {
                    title: {
                        formatter: function (val: string) {
                            return val + " per session";
                        }
                    }
                },
                {
                    title: {
                        formatter: function (val: string) {
                            return val;
                        }
                    }
                }
            ]
        },
        colors: chartsColor
    }

    return (
        <React.Fragment>
            <ReactApexChart
                dir="ltr"
                className="!min-h-full"
                options={options}
                series={series}
                data-chart-colors="[bg-primary-500]"
                type="area"
                id={chartId}
                height={380}
                width="100%"
            />
        </React.Fragment>
    );
};

export default BasicAreaChart;