Echarts

There are few options on how to include/import Echarts into your project.

Install from NPM

Install the Echarts Js library from command prompt from the root directory of the project:

npm i echarts-for-react echarts

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

import useChartColors from '@src/hooks/useChartColors';

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

HTML

import React from 'react';
import dynamic from 'next/dynamic';
import useChartColors from '@src/hooks/useChartColors';

// Dynamically import the ReactApexChart component
const ReactEcharts = dynamic(() => import('echarts-for-react'), {
    ssr: false,
});

interface barChartsProps {
    chartColors: string;
    chartDarkColors: string;
}

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

    var options = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            top: '5%',
            left: '5%',
            right: '0%',
            bottom: '6%',
        },
        color: chartsColor,
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    };

    return (
        <React.Fragment>
            <ReactEcharts option={options}  className="h-80" />
        </React.Fragment>
    );
};