There are few options on how to include/import ApexSankey into your project:
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 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 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>
Component
import useChartColors from '@src/hooks/useChartColors'; import ApexSankey from 'apexsankey'; import React, { useEffect, useRef, useState } from 'react'; 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 <div ref={apexSankeyContainerRef}></div> }; export default BasicSankeyChart;
Be the first to know about new updates and exclusive discounts. No spam, just great offers!
How about
With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.
Hire Us© Domiex Created & Crafted by SRBThemes.