ApexSankey

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

Install from NPM

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

npm install apexsankey --save

How to import ApexSankey package?

import ApexSankey from 'apexsankey';

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

HTML

<div className="card-body">
    <BasicSankeyChart chartColors="bg-gray-800, bg-white, bg-gray-200" chartDarkColors="bg-dark-100, bg-dark-900, bg-dark-800" />
</div>

JavaScript

import ApexSankey from 'apexsankey';
import { useEffect, useRef, useState } from 'react';
import useChartColors from '../../js/hooks/useChartColors';

const BasicSankeyChart = ({ chartColors, chartDarkColors }) => {
    const apexSankeyContainerRef = useRef(null);
    const [data, setData] = useState(null);
    const colors = useChartColors({ chartColors, chartDarkColors });

    // Initialize data once
    useEffect(() => {   
        const initialData = {
            nodes: [
                { id: 'Oil', title: 'Oil' },
                { id: 'Natural Gas', title: 'Natural Gas' },
                { id: 'Coal', title: 'Coal' },
                { id: 'Fossil Fuels', title: 'Fossil Fuels' },
                { id: 'Electricity', title: 'Electricity' },
                { id: 'Energy', title: 'Energy' },
            ],
            edges: [
                { source: 'Oil', target: 'Fossil Fuels', value: 15 },
                { source: 'Natural Gas', target: 'Fossil Fuels', value: 20 },
                { source: 'Coal', target: 'Fossil Fuels', value: 25 },
                { source: 'Coal', target: 'Electricity', value: 25 },
                { source: 'Fossil Fuels', target: 'Energy', value: 60 },
                { source: 'Electricity', target: 'Energy', value: 25 },
            ],
        };
        setData(initialData);
    }, []);

    // Render chart when data or colors change
    useEffect(() => {
        if (colors.length === 0 || !data || !apexSankeyContainerRef.current) return;

        const renderChart = () => {
            const graphOptions = {
                nodeWidth: 20,
                fontWeight: 500,
                fontSize: '10px',
                height: 300,
                fontColor: colors[0],
                canvasStyle: '',
                tooltipBGColor: colors[1],
                tooltipBorderColor: colors[2],
                nodeTemplate: (source, target, value) => {
                   return `
                         <div class="flex items-center gap-2">
                         <div class="size-3" style="background-color:${source.color}"></div>
                         <h6 class="dark:text-dark-100">${source.title}</h6>
                         <div> => </div>
                         <div class="size-3" style="background-color:${target.color}"></div>
                         <h6 class="dark:text-dark-100">${target.title}</h6>
                         <div>: ${value}</div>
                         </div>
                    `;
                },
            };

            // Clear previous chart
            if (apexSankeyContainerRef.current) {
                apexSankeyContainerRef.current.innerHTML = '';
            }

            // Initialize and render new chart
            const newApexSankeyChart = new ApexSankey(apexSankeyContainerRef.current, graphOptions);
            newApexSankeyChart.render(data);
        };

        renderChart();

        // Handle window resize
        const handleResize = () => {
            renderChart();
        };

        window.addEventListener('resize', handleResize);

        // Cleanup on unmount
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, [data, colors]);

    return 
;
};

export default BasicSankeyChart;