SankeyChart API

API reference docs for the React SankeyChart component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Charts - Sankey 🧪

Import

import { SankeyChart } from '@mui/x-charts-pro/SankeyChart';
// or
import { SankeyChart } from '@mui/x-charts-pro';

Learn about the difference by reading this guide on minimizing bundle size.

Sankey Chart component

Displays a Sankey diagram, visualizing flows between nodes where the width of the links is proportional to the flow quantity.

Props

Name	Type	Default	Description
series*	object	-	The series to display in the Sankey chart. A single object is expected.
classes	object	-	Classes applied to the various elements. See CSS classes API below for more details.
colors	Array<string> \| func	rainbowSurgePalette	Color palette used to colorize multiple series.
experimentalFeatures	{ preferStrictDomainInLineCharts?: bool }	-	Options to enable features planned for the next major.
height	number	-	The height of the chart in px. If not defined, it takes the height of the parent element.
id	string	-	This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.
loading	bool	false	If `true`, a loading overlay is displayed.
localeText	object	-	Localized text for chart components.
margin	number \| { bottom?: number, left?: number, right?: number, top?: number }	-	The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
onLinkClick	func	-	Callback fired when a sankey item is clicked. Signature:`function(event: React.MouseEvent, link: SankeyLinkIdentifierWithData) => void` `event` The event source of the callback. `link` The sankey link identifier.
onNodeClick	func	-	Callback fired when a sankey item is clicked. Signature:`function(event: React.MouseEvent, node: SankeyNodeIdentifierWithData) => void` `event` The event source of the callback. `node` The sankey node identifier.
slotProps	object	{}	The props used for each component slot.
slots	object	{}	Overridable component slots. See Slots API below for more details.
width	number	-	The width of the chart in px. If not defined, it takes the width of the parent element.

The component cannot hold a ref.

Slots

Slot name	Default component	Description
baseButton
baseIconButton
loadingOverlay	`ChartsLoadingOverlay`	Overlay component rendered when the chart is in a loading state.
noDataOverlay	`ChartsNoDataOverlay`	Overlay component rendered when the chart has no data to display.
toolbar	`ChartsToolbar`	Custom component for the toolbar.
tooltip	`ChartsTooltipRoot`	Custom component for the tooltip popper.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Rule name	Description
.MuiSankeyChart-linkLabels	linkLabels	Styles applied to the link label container.
.MuiSankeyChart-links	links	Styles applied to the links container.
.MuiSankeyChart-nodes	nodes	Styles applied to the nodes container.
.MuiSankeyChart-root	root	Styles applied to the root element.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.