ApexSankey

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

Install from NPM

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

yarn add apexsankey

How to import ApexSankey package?

import ApexSankey from 'apexsankey';

Check the below example how to use and make it working ApexSankey on any page.

HTML

<div id="basicSankey" dir="ltr"></div>

JavaScript

import ApexSankey from 'apexsankey';

// common functions to all charts to re-render and update charts based on changes in layouts

//Basic Chart
const data = {
    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,
        },
    ],
};
const graphOptions = {
    nodeWidth: 20,
    fontWeight: '500',
    fontSize: '10px',
    height: '200px',
    enableToolbar: true,
    fontColor: '--dx-body-color',
    tooltipBGColor: '--dx-secondary-bg',
    tooltipBorderColor: '--dx-border-color',
    canvasStyle: 'border: 1px solid var(--dx-border-color); background: var(--dx-secondary-bg);',
};

allCharts.push([{ 'id': 'basicSankey', 'data': graphOptions, renderData: data }]);

window.addEventListener('DOMContentLoaded', () => {
    updateAllCharts();
});

window.addEventListener('resize', () => { setTimeout(() => { updateAllCharts(); }, 0) });