SankeyPlot API - MUI X

SankeyPlot API - MUI XSkip to contentSkip to content🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.Search…

MUI X

Chartsv9.5.0What's new in MUI XIntroductionCommon conceptsData GridDate and Time PickersChartsOverviewQuickstartExamplesComponentsBarsLinesPieScatterSparklineGaugeRadarHeatmapFunnelSankeyCandlestickRadial BarsRadial LinesMapPreviewFuture componentsPlannedMain featuresAccessibilityAnimationAxesBrushCustom componentsCompositionDatasetData Grid integrationNewExportHighlightingLabelLegendLocalizationPerformanceStackingStylingRadial axesReferencesToolbarTooltipZoom and panContent Security PolicyResourcesAPI referenceAnimatedAreaAnimatedLineAreaElementAreaPlotBarChartBarChartPremiumBarChartProBarElementBarLabelBarPlotBarPlotPremiumCandlestickChartCandlestickPlotChartsAxisChartsAxisHighlightChartsAxisHighlightValueChartsAxisTooltipContentChartsBrushOverlayChartsClipPathChartsContainerChartsContainerPremiumChartsContainerProChartsDataProviderChartsDataProviderPremiumChartsDataProviderProChartsGeoDataProviderPremiumChartsGridChartsItemTooltipContentChartsLegendChartsLocalizationProviderChartsRadialAxisHighlightChartsRadialDataProviderChartsRadialDataProviderPremiumChartsRadialGridChartsRadiusAxisChartsReferenceLineChartsRotationAxisChartsSurfaceChartsTextChartsToolbarImageExportTriggerChartsToolbarPrintExportTriggerChartsToolbarProChartsToolbarRangeButtonTriggerChartsToolbarZoomInTriggerChartsToolbarZoomOutTriggerChartsTooltipChartsTooltipContainerChartsWrapperChartsXAxisChartsYAxisChartsZoomSliderContinuousColorLegendFocusedFunnelSectionFocusedHeatmapCellFocusedMapShapeFocusedRadarMarkFocusedRangeBarFocusedSankeyLinkFocusedSankeyNodeFunnelChartFunnelPlotGaugeGaugeContainerGeoDataPlotGraticuleHeatmapHeatmapCellHeatmapPlotHeatmapPremiumHeatmapTooltipHeatmapTooltipContentHighlightedScatterMarkLineChartLineChartProLineElementLineHighlightElementLineHighlightPlotLinePlotMapShapeMapShapePlotMarkElementMarkPlotPieArcPieArcLabelPieArcLabelPlotPieArcPlotPiecewiseColorLegendPieChartPieChartProPiePlotRadarAxisRadarAxisHighlightRadarChartRadarChartProRadarGridRadarMetricLabelsRadarSeriesAreaRadarSeriesMarksRadarSeriesPlotRadialAreaPlotRadialBarChartRadialBarPlotRadialLineChartRadialLineHighlightPlotRadialLinePlotRadialMarkPlotRangeBarPlotSankeyChartSankeyDataProviderSankeyPlotSankeyTooltipSankeyTooltipContentScatterScatterChartScatterChartPremiumScatterChartProScatterPlotScatterPlotPremiumSparkLineChartToolbarToolbarButtonInterfacesAxisConfigBarSeriesFunnelSeriesHeatmapSeriesLineSeriesPieSeriesRadarSeriesScatterSeriesLegendItemParamsChartImageExportOptionsChartPrintExportOptionsHooksPluginsTree ViewSchedulerPreviewChatPreviewMigrationSankeyPlot API

API reference docs for the React SankeyPlot 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 - SankeyImport

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

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

Renders a Sankey diagram plot.

PropsView:table

Props of the native component are also available.

NameTypeDescriptionclassesobject

Classes applied to the various elements.

See CSS classes API below for more details.

onLinkClickfunc

Callback fired when a sankey item is clicked.

Signature:function(event: React.MouseEvent, link: SankeyLinkIdentifierWithData) => voidevent The event source of the callback.link The sankey link identifier.onNodeClickfunc

Callback fired when a sankey item is clicked.

Signature:function(event: React.MouseEvent, node: SankeyNodeIdentifierWithData) => voidevent The event source of the callback.node The sankey node identifier.The component cannot hold a ref.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.

Edit this page

Was this page helpful?

•

Blog

•

Store

Contents

DemosImportPropsclassesonLinkClickonNodeClickSource codeBecome a Diamond sponsorMUI stands in solidarity with Ukraine.Search…