### Example ApexSankey Data Structure

Source: https://github.com/apexcharts/apexsankey/blob/main/README.md

A complete example demonstrating the structure of nodes, edges, and options for ApexSankey.

```javascript
const data = {
  nodes: [
    {
      id: 'a',
      title: 'AAA',
    },
    {
      id: 'b',
      title: 'BBB',
    },
    {
      id: 'c',
      title: 'CCC',
    },
  ],
  edges: [
    {
      source: 'a',
      target: 'c',
      value: 1,
      type: 'A',
    },
    {
      source: 'b',
      target: 'c',
      value: 2,
      type: 'A',
    },
  ],
  options: {
    order: [[['a', 'b']], [['c']]],
  },
};
```

--------------------------------

### Instantiate and Render ApexSankey Charts

Source: https://github.com/apexcharts/apexsankey/blob/main/demo/css-theming.html

Initializes and renders ApexSankey charts using provided data and options for both live and OS-dark mode examples.

```javascript
const sankey = new ApexSankey(document.getElementById('sankey-live'), sankeyOptions);
sankey.render(sankeyData);

const sankeyOsDark = new ApexSankey(document.getElementById('sankey-os-dark'), sankeyOptions);
sankeyOsDark.render(sankeyData);
```

--------------------------------

### Install ApexSankey Package

Source: https://github.com/apexcharts/apexsankey/blob/main/README.md

Install the ApexSankey package using npm to add it to your project's dependencies.

```bash
npm install apexsankey
```

--------------------------------

### Customize Sankey Node Appearance

Source: https://github.com/apexcharts/apexsankey/blob/main/demo/sankey-node-customization.html

Use `nodeWidth`, `nodeBorderWidth`, and `nodeBorderColor` options to style Sankey nodes. This example visualizes a recruitment pipeline with distinct node styles.

```javascript
const data = { nodes: [
  // Sources
  {id: 'LinkedIn', title: 'LinkedIn', color: '#0A66C2'},
  {id: 'Indeed', title: 'Indeed', color: '#2164F3'},
  {id: 'Referral', title: 'Employee Referral', color: '#7C3AED'},
  {id: 'Career Page', title: 'Career Page', color: '#0891B2'},
  // Screening
  {id: 'Applied', title: 'Applied', color: '#64748B'},
  {id: 'Auto Rejected', title: 'Auto-Rejected', color: '#CBD5E1'},
  // Stages
  {id: 'Phone Screen', title: 'Phone Screen', color: '#F59E0B'},
  {id: 'Technical', title: 'Technical Interview', color: '#F97316'},
  {id: 'Culture Fit', title: 'Culture Fit', color: '#EF4444'},
  // Outcomes
  {id: 'Offer Made', title: 'Offer Made', color: '#10B981'},
  {id: 'Rejected', title: 'Rejected', color: '#94A3B8'},
  {id: 'Withdrew', title: 'Withdrew', color: '#D4D4D8'},
  {id: 'Hired', title: 'Hired', color: '#059669'},
  {id: 'Declined', title: 'Declined Offer', color: '#A3A3A3'},
],
edges: [
  {source: 'LinkedIn', target: 'Applied', value: 340},
  {source: 'Indeed', target: 'Applied', value: 280},
  {source: 'Referral', target: 'Applied', value: 120},
  {source: 'Career Page', target: 'Applied', value: 160},
  {source: 'Applied', target: 'Auto Rejected', value: 450},
  {source: 'Applied', target: 'Phone Screen', value: 450},
  {source: 'Phone Screen', target: 'Technical', value: 220},
  {source: 'Phone Screen', target: 'Rejected', value: 180},
  {source: 'Phone Screen', target: 'Withdrew', value: 50},
  {source: 'Technical', target: 'Culture Fit', value: 110},
  {source: 'Technical', target: 'Rejected', value: 90},
  {source: 'Technical', target: 'Withdrew', value: 20},
  {source: 'Culture Fit', target: 'Offer Made', value: 65},
  {source: 'Culture Fit', target: 'Rejected', value: 35},
  {source: 'Culture Fit', target: 'Withdrew', value: 10},
  {source: 'Offer Made', target: 'Hired', value: 48},
  {source: 'Offer Made', target: 'Declined', value: 17},
]};

const options = {
  nodeWidth: 28,
  nodeBorderWidth: 2,
  nodeBorderColor: '#1e293b',
  fontFamily: 'Inter, sans-serif',
  fontWeight: '600',
  fontSize: '12px',
  fontColor: '#1e293b',
  width: '100%',
  height: 560,
  edgeGradientFill: true,
  edgeOpacity: 0.25,
  spacing: 30,
  enableToolbar: true,
  canvasStyle: 'border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; box-sizing: border-box;',
};

const s = new ApexSankey(document.getElementById('svg-sankey'), options);
s.render(data);
```

--------------------------------

### Import ApexSankey

Source: https://github.com/apexcharts/apexsankey/blob/main/README.md

Import the ApexSankey library into your JavaScript project. This is the first step before creating any chart instances.

```javascript
import ApexSankey from 'apexsankey';
```

--------------------------------

### Control Sankey Node Gap

Source: https://github.com/apexcharts/apexsankey/blob/main/demo/sankey-edge-options.html

Modify the gap between nodes in a Sankey chart. This example uses an input event listener on a slider to set the edge gap and update the chart display.

```javascript
// Gap slider
const sliderGap = document.getElementById('slider-gap');
const valGap = document.getElementById('val-gap');
sliderGap.addEventListener('input', () => {
  edgeGap = parseInt(sliderGap.value, 10);
  valGap.textContent = edgeGap;
  render();
});
```

--------------------------------

### new ApexSankey(element, options?)

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Creates a new Sankey chart instance. The constructor takes a DOM element and an optional options object to configure the chart's appearance and behavior. Call `render()` after construction to draw the diagram.

```APIDOC
## new ApexSankey(element, options?)

### Description
Creates a new Sankey chart instance and applies canvas dimensions to the host element. Call `render()` after construction to draw the diagram. All options are optional and fall back to built-in defaults.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Constructor Options
- **element** (DOMElement) - The DOM element where the Sankey diagram will be rendered.
- **options** (Object) - Optional configuration object for the Sankey chart.
  - **width** (string | number) - CSS percentage or pixel number for the chart width.
  - **height** (number | 'auto') - Pixel number for the chart height, or 'auto' to maintain a 1.6:1 ratio with width.
  - **nodeWidth** (number) - The width of node rectangles in pixels.
  - **spacing** (number) - The horizontal gap between columns in pixels.
  - **viewPortWidth** (number) - The internal SVG viewport width.
  - **viewPortHeight** (number) - The internal SVG viewport height.
  - **canvasStyle** (string) - CSS string for styling the canvas element.
  - **enableToolbar** (boolean) - Whether to show the zoom/pan toolbar.

### Request Example
```js
import ApexSankey from 'apexsankey';

const container = document.getElementById('chart');

const sankey = new ApexSankey(container, {
  width: '100%',
  height: 500,
  nodeWidth: 20,
  spacing: 20,
  viewPortWidth: 800,
  viewPortHeight: 500,
  canvasStyle: 'border: 1px solid #e2e8f0; border-radius: 8px; background: #fafafa;',
  enableToolbar: true,
});
```

### Response
#### Success Response (200)
Returns the `ApexSankey` instance.

#### Response Example
```js
// sankey instance
```
```

--------------------------------

### Configure Tooltip Appearance and Templates

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Enable tooltips, set theme, and customize edge and node tooltip content using template functions.

```javascript
const sankey = new ApexSankey(container, {
  enableTooltip: true,
  tooltipTheme: 'dark',   // 'light' | 'dark' — preset shortcut
  // Fine-grained overrides (ignored when tooltipTheme is set):
  tooltipBGColor: '#161b22',
  tooltipBorderColor: '#30363d',
  tooltipFontColor: '#c9d1d9',
  tooltipId: 'my-sankey-tooltip',

  tooltipTemplate: ({ source, target, value }) => `
    <div style="display:flex;align-items:center;gap:6px;font-size:13px;">
      <span style="width:10px;height:10px;background:${source?.color};border-radius:2px;"></span>
      <strong>${source?.title}</strong>
      →
      <span style="width:10px;height:10px;background:${target?.color};border-radius:2px;"></span>
      <strong>${target?.title}</strong>
      <span style="margin-left:4px;color:#94a3b8;">${value?.toLocaleString()}</span>
    </div>`,

  nodeTooltipTemplate: ({ node, value }) => `
    <div style="font-size:13px;">
      <strong>${node?.title}</strong> — total: ${value?.toLocaleString()}
    </div>`,
});
```

--------------------------------

### Initialize and Render Sankey Chart

Source: https://github.com/apexcharts/apexsankey/blob/main/demo/sankey-node-overlapping.html

Use this code to initialize an ApexSankey instance and render a Sankey diagram with provided data and options. Ensure the target element exists in the DOM.

```javascript
const data = { nodes: [ { id: 'Marketing' }, { id: 'Finance' }, { id: 'Cell Biology' }, { id: 'Genetics' }, { id: 'Creative Writing' }, { id: 'Literature' }, { id: 'Graduated' }, { id: 'Switched Major' }, { id: 'Honors' }, { id: 'Dropped' } ], links: [ // Marketing outcomes {source: 'Marketing', target: 'Graduated', value: 160}, {source: 'Marketing', target: 'Switched Major', value: 25}, {source: 'Marketing', target: 'Dropped', value: 15}, // Finance outcomes {source: 'Finance', target: 'Graduated', value: 110}, {source: 'Finance', target: 'Honors', value: 30}, {source: 'Finance', target: 'Dropped', value: 20}, // Biology outcomes {source: 'Cell Biology', target: 'Graduated', value: 100}, {source: 'Cell Biology', target: 'Switched Major', value: 25}, {source: 'Cell Biology', target: 'Dropped', value: 15}, {source: 'Genetics', target: 'Graduated', value: 80}, {source: 'Genetics', target: 'Honors', value: 25}, {source: 'Genetics', target: 'Dropped', value: 15}, // English outcomes {source: 'Creative Writing', target: 'Graduated', value: 80}, {source: 'Creative Writing', target: 'Switched Major', value: 20}, {source: 'Creative Writing', target: 'Dropped', value: 10}, {source: 'Literature', target: 'Graduated', value: 65}, {source: 'Literature', target: 'Honors', value: 15}, {source: 'Literature', target: 'Dropped', value: 10}, ] }; const options = { nodeWidth: 14, fontFamily: 'Inter, sans-serif', fontWeight: '500', fontSize: '11px', fontColor: '#334155', width: '100%', height: 680, spacing: 24, edgeGradientFill: true, edgeOpacity: 0.25, enableToolbar: true, highlightConnectedPath: true, dimOpacity: 0.12, canvasStyle: 'border: 1px solid #e2e8f0; border-radius: 8px; background: #fafafa; box-sizing: border-box;', }; const s = new ApexSankey(document.getElementById('svg-sankey'), options); s.render(data);
```

--------------------------------

### Configure Node Appearance and Click Handler

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Set node width, border, and color. Attach a click handler to receive node data.

```javascript
const sankey = new ApexSankey(container, {
  nodeWidth: 28,              // wider nodes for pipeline-stage emphasis
  nodeBorderWidth: 2,         // border thickness in px
  nodeBorderColor: '#1e293b', // null disables border entirely
  onNodeClick: (node) => {
    // node: { id, title, color, value, rank, x, y, dy, ... }
    console.log('Clicked node:', node.data?.title, 'total flow:', node.value);
  },
});
```

--------------------------------

### CDN Usage for ApexSankey in Non-Module Environments

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Include ApexSankey and its peer dependency (SVG.js) via CDN for use in environments that do not support modules. Instantiate the `ApexSankey` constructor directly using the global object.

```html
<!-- Peer dependency -->
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js"></script>
<!-- ApexSankey UMD bundle -->
<script src="https://cdn.jsdelivr.net/npm/apexsankey/apexsankey.min.js"></script>

<div id="sankey-container"></div>

<script>
  const data = {
    nodes: [
      { id: 'Solar',       title: 'Solar'       },
      { id: 'Wind',        title: 'Wind'        },
      { id: 'Electricity', title: 'Electricity' },
      { id: 'Homes',       title: 'Homes'       },
      { id: 'Industry',    title: 'Industry'    },
    ],
    edges: [
      { source: 'Solar',       target: 'Electricity', value: 30 },
      { source: 'Wind',        target: 'Electricity', value: 25 },
      { source: 'Electricity', target: 'Homes',       value: 35 },
      { source: 'Electricity', target: 'Industry',    value: 20 },
    ],
  };

  const sankey = new ApexSankey(document.getElementById('sankey-container'), {
    width: '100%',
    height: 400,
    edgeGradientFill: true,
    enableToolbar: true,
  });
  sankey.render(data);
</script>
```

--------------------------------

### Order Option Structure for ApexSankey

Source: https://github.com/apexcharts/apexsankey/blob/main/README.md

Illustrates the nested list structure for the 'order' option, defining layers, bands, and node IDs for explicit layer assignment.

```json
{
    "order": [
        [['a', 'b']],
        [['c']]
    ],
}
```

--------------------------------

### Configure Entrance Animation

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Enable or disable the entrance animation and set its duration. Animation is automatically disabled for users preferring reduced motion.

```javascript
const sankey = new ApexSankey(container, {
  animation: {
    enabled: true,   // set false to skip entrance animation
    duration: 800,   // milliseconds
  },
});
sankey.render(data);
```

--------------------------------

### Create Basic Sankey Diagram

Source: https://github.com/apexcharts/apexsankey/blob/main/README.md

Create a basic Sankey diagram with minimal configuration. Ensure the target div exists and the data and options are properly defined.

```html
<div id="sankey-container"></div>
```

```javascript
 const data = {
   ...(data with format provided below)
 }
 const options = {
    width: 800,
    height: 800,
    canvasStyle: 'border: 1px solid #caced0; background: #f6f6f6;',
    spacing: 100,
    nodeWidth: 20,
 };
 const sankey = new ApexSankey(document.getElementById('sankey-container'), options);
 const graph = sankey.render(data);
```

--------------------------------

### Set ApexCharts License Key

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Set the global ApexCharts commercial license key once at application startup before creating any chart instances. Omitting this will result in a watermark on the rendered chart.

```javascript
import ApexSankey from 'apexsankey';

// Call once at app startup before creating any instances
ApexSankey.setLicense('YOUR_LICENSE_KEY_HERE');

const sankey = new ApexSankey(document.getElementById('chart'), { width: 800, height: 500 });
sankey.render(data);
```

--------------------------------

### Initialize Sankey Chart with Edge Options

Source: https://github.com/apexcharts/apexsankey/blob/main/demo/sankey-edge-options.html

Defines the data and options for a Sankey chart, including edge gradient fill, opacity, and gap. Renders the chart using the ApexSankey constructor.

```javascript
const data = { nodes: [
  {id: 'China', title: 'China', color: '#EF4444'},
  {id: 'USA', title: 'United States', color: '#3B82F6'},
  {id: 'Germany', title: 'Germany', color: '#F59E0B'},
  {id: 'Japan', title: 'Japan', color: '#EC4899'},
  {id: 'South Korea', title: 'South Korea', color: '#8B5CF6'},
  {id: 'Electronics', title: 'Electronics', color: '#0EA5E9'},
  {id: 'Automotive', title: 'Automotive', color: '#F97316'},
  {id: 'Machinery', title: 'Machinery', color: '#64748B'},
  {id: 'Textiles', title: 'Textiles', color: '#D946EF'},
  {id: 'Chemicals', title: 'Chemicals', color: '#10B981'},
  {id: 'Europe', title: 'Europe', color: '#6366F1'},
  {id: 'North America', title: 'North America', color: '#14B8A6'},
  {id: 'Asia Pacific', title: 'Asia Pacific', color: '#F43F5E'},
  {id: 'Rest of World', title: 'Rest of World', color: '#A3A3A3'},
], edges: [
  {source: 'China', target: 'Electronics', value: 280},
  {source: 'China', target: 'Textiles', value: 150},
  {source: 'China', target: 'Machinery', value: 120},
  {source: 'USA', target: 'Electronics', value: 180},
  {source: 'USA', target: 'Chemicals', value: 140},
  {source: 'USA', target: 'Machinery', value: 100},
  {source: 'Germany', target: 'Automotive', value: 220},
  {source: 'Germany', target: 'Machinery', value: 160},
  {source: 'Germany', target: 'Chemicals', value: 90},
  {source: 'Japan', target: 'Automotive', value: 170},
  {source: 'Japan', target: 'Electronics', value: 140},
  {source: 'South Korea', target: 'Electronics', value: 160},
  {source: 'South Korea', target: 'Automotive', value: 80},
  {source: 'Electronics', target: 'North America', value: 300},
  {source: 'Electronics', target: 'Europe', value: 260},
  {source: 'Electronics', target: 'Asia Pacific', value: 150},
  {source: 'Electronics', target: 'Rest of World', value: 50},
  {source: 'Automotive', target: 'North America', value: 200},
  {source: 'Automotive', target: 'Europe', value: 180},
  {source: 'Automotive', target: 'Asia Pacific', value: 60},
  {source: 'Automotive', target: 'Rest of World', value: 30},
  {source: 'Machinery', target: 'Europe', value: 160},
  {source: 'Machinery', target: 'Asia Pacific', value: 120},
  {source: 'Machinery', target: 'North America', value: 70},
  {source: 'Machinery', target: 'Rest of World', value: 30},
  {source: 'Textiles', target: 'Europe', value: 60},
  {source: 'Textiles', target: 'North America', value: 50},
  {source: 'Textiles', target: 'Rest of World', value: 40},
  {source: 'Chemicals', target: 'Europe', value: 80},
  {source: 'Chemicals', target: 'Asia Pacific', value: 90},
  {source: 'Chemicals', target: 'North America', value: 40},
  {source: 'Chemicals', target: 'Rest of World', value: 20},
], }; let gradientFill = true;
let edgeOpacity = 0.4;
let edgeGap = 2;

function buildOptions() {
  return {
    nodeWidth: 18,
    fontFamily: 'Inter, sans-serif',
    fontWeight: '500',
    fontSize: '12px',
    fontColor: '#334155',
    width: '100%',
    height: 560,
    edgeGradientFill: gradientFill,
    edgeOpacity: edgeOpacity,
    edgeGap: edgeGap,
    enableToolbar: false,
    canvasStyle: 'border: 1px solid #e2e8f0; border-radius: 8px; background: #fafafa; box-sizing: border-box;',
  };
}

function render() {
  const el = document.getElementById('svg-sankey');
  el.innerHTML = '';
  const s = new ApexSankey(el, buildOptions());
  s.render(data);
}

render();
```

--------------------------------

### Set ApexSankey License Key

Source: https://github.com/apexcharts/apexsankey/blob/main/README.md

Set your commercial license key before creating any chart instances. This is required for using ApexSankey in a commercial project.

```javascript
import ApexSankey from 'apexsankey';

// set license key before creating any charts
ApexSankey.setLicense('your-license-key');

const sankey = new ApexSankey(document.getElementById('sankey-container'), options);
const graph = sankey.render(data);
```

--------------------------------

### Configure Interaction and Path Highlighting

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Control the connected-path highlight effect and the opacity of unrelated elements during hover.

```javascript
// Re-render pattern for dynamic option updates
function render(highlightEnabled, dimOpacityValue) {
  const container = document.getElementById('chart');
  container.innerHTML = ''; // clear previous instance
  const s = new ApexSankey(container, {
    highlightConnectedPath: highlightEnabled, // default true
    dimOpacity: dimOpacityValue,              // opacity for unrelated elements (default 0.15)
    nodeWidth: 20,
    height: 520,
    width: '100%',
  });
  s.render(data);
}

render(true, 0.15);
```

--------------------------------

### Initialize Sankey Diagram with Highlight Feature

Source: https://github.com/apexcharts/apexsankey/blob/main/demo/sankey-path-highlight.html

Initializes the Sankey diagram with options for highlighting connected paths and setting dimming opacity. This code should be used when you want to enable the interactive path highlighting feature.

```javascript
const data = { nodes: [
  {id: 'Solar', title: 'Solar'},
  {id: 'Wind', title: 'Wind'},
  {id: 'Hydro', title: 'Hydro'},
  {id: 'Gas', title: 'Gas'},
  {id: 'Coal', title: 'Coal'},
  {id: 'Electricity', title: 'Electricity'},
  {id: 'Heat', title: 'Heat'},
  {id: 'Transport', title: 'Transport'},
  {id: 'Industry', title: 'Industry'},
  {id: 'Homes', title: 'Homes'},
  {id: 'Losses', title: 'Losses'},
], edges: [
  {source: 'Solar', target: 'Electricity', value: 30},
  {source: 'Wind', target: 'Electricity', value: 25},
  {source: 'Hydro', target: 'Electricity', value: 20},
  {source: 'Gas', target: 'Electricity', value: 15},
  {source: 'Gas', target: 'Heat', value: 20},
  {source: 'Coal', target: 'Electricity', value: 10},
  {source: 'Coal', target: 'Heat', value: 10},
  {source: 'Electricity', target: 'Transport', value: 25},
  {source: 'Electricity', target: 'Industry', value: 35},
  {source: 'Electricity', target: 'Homes', value: 25},
  {source: 'Electricity', target: 'Losses', value: 15},
  {source: 'Heat', target: 'Industry', value: 18},
  {source: 'Heat', target: 'Homes', value: 12},
],
};
let highlightEnabled = true;
let dimOpacity = 0.2;
let sankeyInstance = null;

function buildOptions() {
  return {
    nodeWidth: 20,
    fontFamily: 'Quicksand, sans-serif',
    fontWeight: '600',
    height: 520,
    width: '100%',
    edgeOpacity: 0.4,
    enableToolbar: false,
    highlightConnectedPath: highlightEnabled,
    dimOpacity: dimOpacity,
  };
}

function render() {
  const container = document.getElementById('svg-sankey');
  container.innerHTML = '';
  sankeyInstance = new ApexSankey(container, buildOptions());
  sankeyInstance.render(data);
}

render();
```

--------------------------------

### Configure Layout and Spacing

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Adjust vertical whitespace distribution between nodes and column spacing for a denser or more spread-out layout.

```javascript
// Dense layout for many-node diagrams
const sankey = new ApexSankey(container, {
  whitespace: 0.10,  // default 0.18; range 0–1
  spacing: 24,       // tighter column spacing for dense graphs
  height: 680,
  fontSize: '11px',
});
sankey.render(data);
```

--------------------------------

### Instantiate ApexSankey Chart

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Create a new Sankey chart instance by providing a DOM container element and an optional options object. Configure dimensions, node width, spacing, and other visual properties.

```javascript
import ApexSankey from 'apexsankey';

const container = document.getElementById('chart');

const sankey = new ApexSankey(container, {
  width: '100%',        // CSS percentage or pixel number
  height: 500,          // pixel number or 'auto' (1.6:1 ratio from width)
  nodeWidth: 20,        // width of node rectangles in px
  spacing: 20,          // horizontal gap between columns in px
  viewPortWidth: 800,   // internal SVG viewport width
  viewPortHeight: 500,  // internal SVG viewport height
  canvasStyle: 'border: 1px solid #e2e8f0; border-radius: 8px; background: #fafafa;',
  enableToolbar: true,  // show zoom/pan toolbar
});
```

--------------------------------

### ApexSankey.setLicense(key)

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Sets the global ApexCharts commercial license key. This static method must be called once before creating any chart instances. Omitting this will render the chart with a watermark.

```APIDOC
## ApexSankey.setLicense(key)

### Description
Sets the global ApexCharts commercial license key. Must be called once at app startup before creating any chart instances. Omitting this renders the chart with a watermark.

### Method
`static`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **key** (string) - Your ApexCharts commercial license key.

### Request Example
```js
import ApexSankey from 'apexsankey';

// Call once at app startup before creating any instances
ApexSankey.setLicense('YOUR_LICENSE_KEY_HERE');

const sankey = new ApexSankey(document.getElementById('chart'), { width: 800, height: 500 });
sankey.render(data);
```

### Response
#### Success Response (200)
None (this is a static configuration method).

#### Response Example
None
```

--------------------------------

### Include SVG.js Dependency

Source: https://github.com/apexcharts/apexsankey/blob/main/README.md

Include the svg.js library before using ApexSankey. This is a required dependency for rendering Sankey diagrams.

```bash
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js"></script>
```

--------------------------------

### Configure Edge Appearance

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Control edge opacity, enable gradient fills, and set the gap between adjacent edges.

```javascript
const sankey = new ApexSankey(container, {
  edgeOpacity: 0.4,        // 0–1, transparency of flow bands
  edgeGradientFill: true,  // gradient from source color to target color
  edgeGap: 2,              // px gap between adjacent edges at node endpoints
});
```

--------------------------------

### ApexSankey Data and Options

Source: https://github.com/apexcharts/apexsankey/blob/main/demo/css-theming.html

Defines the data structure and configuration options for an ApexSankey chart, including nodes, edges, and visual properties.

```javascript
const sankeyData = {
  nodes: [
    {id: 'Solar', title: 'Solar'},
    {id: 'Wind', title: 'Wind'},
    {id: 'Grid', title: 'Grid'},
    {id: 'Battery', title: 'Battery'},
    {id: 'Home', title: 'Home'},
    {id: 'EV', title: 'EV Charging'},
    {id: 'Export', title: 'Grid Export'},
    {id: 'Lighting', title: 'Lighting'},
    {id: 'Appliances', title: 'Appliances'},
    {id: 'Heating', title: 'Heating'},
  ],
  edges: [
    {source: 'Solar', target: 'Battery', value: 30},
    {source: 'Solar', target: 'Home', value: 45},
    {source: 'Solar', target: 'Export', value: 15},
    {source: 'Wind', target: 'Grid', value: 60},
    {source: 'Grid', target: 'Home', value: 25},
    {source: 'Grid', target: 'EV', value: 20},
    {source: 'Battery', target: 'Home', value: 20},
    {source: 'Battery', target: 'EV', value: 10},
    {source: 'Home', target: 'Lighting', value: 20},
    {source: 'Home', target: 'Appliances', value: 40},
    {source: 'Home', target: 'Heating', value: 30},
  ],
  options: {},
};

const sankeyOptions = {
  width: '100%',
  height: 420,
  nodeWidth: 14,
  edgeGradientFill: true,
  enableTooltip: true,
  enableToolbar: false,
};
```

--------------------------------

### Toggle ApexSankey Theme

Source: https://github.com/apexcharts/apexsankey/blob/main/demo/css-theming.html

Implements a function to toggle the theme between light and dark modes by manipulating the 'data-theme' attribute on the body and re-rendering the chart.

```javascript
function toggleTheme() {
  const isDark = document.body.getAttribute('data-theme') === 'dark';
  if (isDark) {
    document.body.removeAttribute('data-theme');
    document.getElementById('themeIcon').textContent = '🌙';
    document.getElementById('themeLabel').textContent = 'Switch to Dark Mode';
  } else {
    document.body.setAttribute('data-theme', 'dark');
    document.getElementById('themeIcon').textContent = '☀️';
    document.getElementById('themeLabel').textContent = 'Switch to Light Mode';
  }
  // Re-render so the chart picks up the new CSS vars
  sankey.render(sankeyData);
}
```

--------------------------------

### Render Basic Sankey Chart

Source: https://github.com/apexcharts/apexsankey/blob/main/demo/basic-sankey.html

Use this code to render a basic Sankey chart. Ensure the ApexSankey library is included and the target SVG element exists. The `data` object defines nodes and edges, while `options` configure chart appearance and behavior.

```javascript
const data = { nodes: [
  {id: 'Salary', title: 'Salary', color: '#6366F1'},
  {id: 'Freelance', title: 'Freelance', color: '#8B5CF6'},
  {id: 'Housing', title: 'Housing', color: '#F43F5E'},
  {id: 'Food', title: 'Food', color: '#F97316'},
  {id: 'Transport', title: 'Transport', color: '#0EA5E9'},
  {id: 'Savings', title: 'Savings', color: '#10B981'},
  {id: 'Entertainment', title: 'Entertainment', color: '#EC4899'},
  {id: 'Rent', title: 'Rent', color: '#FB7185'},
  {id: 'Utilities', title: 'Utilities', color: '#FDA4AF'},
  {id: 'Groceries', title: 'Groceries', color: '#FDBA74'},
  {id: 'Dining Out', title: 'Dining Out', color: '#FB923C'},
  {id: 'Car Payment', title: 'Car Payment', color: '#38BDF8'},
  {id: 'Gas & Transit', title: 'Gas & Transit', color: '#7DD3FC'},
  {id: 'Emergency Fund', title: 'Emergency Fund', color: '#34D399'},
  {id: 'Investments', title: 'Investments', color: '#6EE7B7'},
  {id: 'Streaming', title: 'Streaming', color: '#F9A8D4'},
  {id: 'Hobbies', title: 'Hobbies', color: '#F472B6'},
],
edges: [
  {source: 'Salary', target: 'Housing', value: 1800},
  {source: 'Salary', target: 'Food', value: 900},
  {source: 'Salary', target: 'Transport', value: 600},
  {source: 'Salary', target: 'Savings', value: 1200},
  {source: 'Salary', target: 'Entertainment', value: 300},
  {source: 'Freelance', target: 'Food', value: 200},
  {source: 'Freelance', target: 'Savings', value: 500},
  {source: 'Freelance', target: 'Entertainment', value: 300},
  {source: 'Housing', target: 'Rent', value: 1500},
  {source: 'Housing', target: 'Utilities', value: 300},
  {source: 'Food', target: 'Groceries', value: 750},
  {source: 'Food', target: 'Dining Out', value: 350},
  {source: 'Transport', target: 'Car Payment', value: 400},
  {source: 'Transport', target: 'Gas & Transit', value: 200},
  {source: 'Savings', target: 'Emergency Fund', value: 700},
  {source: 'Savings', target: 'Investments', value: 1000},
  {source: 'Entertainment', target: 'Streaming', value: 200},
  {source: 'Entertainment', target: 'Hobbies', value: 400},
],
};

const options = {
  nodeWidth: 18,
  fontFamily: 'Inter, sans-serif',
  fontWeight: '500',
  fontSize: '12px',
  fontColor: '#334155',
  width: '100%',
  height: 520,
  edgeGradientFill: true,
  edgeOpacity: 0.35,
  enableToolbar: true,
  canvasStyle: 'border: 1px solid #e2e8f0; border-radius: 8px; background: #fafafa; box-sizing: border-box;',
};

const s = new ApexSankey(document.getElementById('svg-sankey'), options);
s.render(data);
```

--------------------------------

### Configure Font Properties

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Set the font family, size, weight, and color for all node labels. Accepts standard CSS font property values.

```javascript
const sankey = new ApexSankey(container, {
  fontFamily: 'Inter, sans-serif',
  fontSize: '13px',
  fontWeight: '600',
  fontColor: '#334155',
});
sankey.render(data);
```

--------------------------------

### ApexSankey CSS Theming Properties

Source: https://github.com/apexcharts/apexsankey/blob/main/demo/css-theming.html

Defines CSS custom properties for ApexSankey in light mode and overrides them for dark mode using media queries and data attributes.

```css
/* Light mode tokens on the container */ #my-sankey { --apex-sankey-edge-opacity: 0.5; --apex-sankey-edge-gradient: true; --apex-sankey-label-color: #2d3748; --apex-sankey-label-font-size: 12px; --apex-sankey-font-family: system-ui, sans-serif; --apex-sankey-node-width: 16; --apex-sankey-node-border-color: transparent; --apex-sankey-node-border-width: 0; --apex-sankey-tooltip-bg: #ffffff; --apex-sankey-tooltip-border-color: #e2e8f0; } /* Dark mode — via OS preference (no JS required) */ @media (prefers-color-scheme: dark) { #my-sankey { --apex-sankey-edge-opacity: 0.4; --apex-sankey-label-color: #c9d1d9; --apex-sankey-tooltip-bg: #161b22; --apex-sankey-tooltip-border-color: #30363d; } } /* Dark mode — via a manual [data-theme] toggle */ [data-theme="dark"] #my-sankey { --apex-sankey-edge-opacity: 0.4; --apex-sankey-label-color: #c9d1d9; --apex-sankey-tooltip-bg: #161b22; --apex-sankey-tooltip-border-color: #30363d; }
```

--------------------------------

### Node Object Structure for ApexSankey

Source: https://github.com/apexcharts/apexsankey/blob/main/README.md

Defines the required 'id' and 'title' properties for each node in the ApexSankey data.

```json
{
  "id": "1", // required
  "title": "A" // required
}
```

--------------------------------

### Edge Object Structure for ApexSankey

Source: https://github.com/apexcharts/apexsankey/blob/main/README.md

Specifies the mandatory 'source', 'target', and 'value' fields for edges, along with an optional 'type' for grouping.

```json
{
    "source": "a",    // required
    "target": "b",    // required
    "value": 1,       // required
    "type": "x",      // optional
}
```

--------------------------------

### Manual Column Ordering with data.options.order

Source: https://context7.com/apexcharts/apexsankey/llms.txt

Specify the exact order of columns and bands in the Sankey diagram by providing an `order` array within the `options` object. This bypasses automatic rank assignment.

```javascript
const data = {
  nodes: [
    { id: 'LinkedIn',     title: 'LinkedIn'     },
    { id: 'Indeed',       title: 'Indeed'       },
    { id: 'Referral',     title: 'Referral'     },
    { id: 'Applied',      title: 'Applied'      },
    { id: 'Interviewed',  title: 'Interviewed'  },
    { id: 'No Response',  title: 'No Response'  },
    { id: 'Accepted',     title: 'Accepted!'    },
    { id: 'Declined',     title: 'Declined'     },
  ],
  edges: [
    { source: 'LinkedIn',    target: 'Applied',     value: 85 },
    { source: 'Indeed',      target: 'Applied',     value: 62 },
    { source: 'Referral',    target: 'Applied',     value: 28 },
    { source: 'Applied',     target: 'Interviewed', value: 22 },
    { source: 'Applied',     target: 'No Response', value: 153 },
    { source: 'Interviewed', target: 'Accepted',    value: 4  },
    { source: 'Interviewed', target: 'Declined',    value: 18 },
  ],
  options: {
    order: [
      [['LinkedIn', 'Indeed', 'Referral']],  // column 0
      [['Applied']],                          // column 1
      [['Interviewed'], ['No Response']],     // column 2, two bands
      [['Accepted', 'Declined']],             // column 3
    ],
    alignLinkTypes: false,  // true aligns link types across nodes instead of minimising crossings
  },
};

const sankey = new ApexSankey(document.getElementById('chart'), { width: '100%', height: 500 });
sankey.render(data);
```

--------------------------------

### Apply Dark Mode via prefers-color-scheme

Source: https://github.com/apexcharts/apexsankey/blob/main/demo/css-theming.html

Applies dark mode styles to the Sankey chart using a media query, enabling automatic theme switching based on the user's operating system preference without requiring JavaScript.

```css
@media (prefers-color-scheme: dark) {
  #sankey-os-dark {
    --apex-sankey-edge-opacity: 0.4;
    --apex-sankey-edge-gradient: true;
    --apex-sankey-label-color: #c9d1d9;
    --apex-sankey-label-font-size: 12px;
    --apex-sankey-font-family: system-ui, sans-serif;
    --apex-sankey-node-width: 16;
    --apex-sankey-node-border-color: transparent;
    --apex-sankey-node-border-width: 0;
    --apex-sankey-tooltip-bg: #161b22;
    --apex-sankey-tooltip-border-color: #30363d;
  }
}
```