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 install echarts --save

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 ApexTree on any page.

HTML

<div class="card-body" x-data="basicBarApp">
    <div class="h-80" x-ref="basicBarChart" data-chart-colors="[bg-sky-500, bg-gray-200, bg-gray-800]" data-chart-dark-colors="[bg-sky-500, bg-dark-800, bg-dark-100]"></div>
</div>

<script src="assets/libs/echarts/echarts.js"></script>

JavaScript

import useChartColors from '../../../js/hooks/useChartColors';
import React from 'react';
import ReactEcharts from 'echarts-for-react';

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>
    );
}

export default BasicBarChart