Mantine UIFAQColors generator

SankeyChart

Sankey diagram component

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/charts

Usage

SankeyChart is based on the Sankey recharts component. It visualizes flow between nodes where the width of each link is proportional to the flow value:

import { SankeyChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <SankeyChart data={data} />;
}

Node color

You can set color on each node in the data to control individual node colors. Colors can reference theme values like blue, red.5, orange.7, etc. Any valid CSS color value is also accepted.

import { SankeyChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <SankeyChart data={data} linkOpacity={0.2} />;
}

Custom colors

Use colors prop to provide an array of colors that are used for nodes when no color is set on individual nodes. Colors can reference theme values. The colors cycle when there are more nodes than colors:

import { SankeyChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <SankeyChart
      data={data}
      colors={['indigo.6', 'cyan.6', 'teal.6', 'orange.6', 'red.6']}
    />
  );
}

Node width and padding

Use nodeWidth to control the width of each node and nodePadding to control the spacing between nodes:

import { SankeyChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <SankeyChart data={data} nodeWidth={20} nodePadding={20} />;
}

Link opacity

Use linkOpacity prop to control the opacity of links between nodes:

import { SankeyChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <SankeyChart data={data} linkOpacity={0.2} />;
}

Disable tooltip

To disable the tooltip, set withTooltip={false}:

import { SankeyChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <SankeyChart data={data} withTooltip={false} />;
}

Treemap

Getting started