ContextQMD
Back to Fluentui

SankeyChartBestPractices

packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartBestPractices.md

4.40.2-hotfix2674 B
Original Source

Layout

Sankey charts require a minimum of 2 layers/ column groups to compare and can go up to a maximum of 4. More than 4 layers start making the chart overwhelming.

Content

  • Node with title of data
  • Stream representing value connecting boxes.
  • Streams have a color gradient from their source to the destination.
  • Hover states over both nodes and streams

Accessibility

In the case where data equates to 1 (which is 4px) the node does not show content. The text is shown when a user hovers over the node.

In the case where the node height reaches a minimum of 24 pixels, the title and number are on the same line. If the title is longer it is truncated.