Sankey Chart
Sankey charts in Reflex are built on Recharts, a React charting library, and created in pure Python. A Sankey chart visualizes weighted flows between nodes, making it useful for showing movement through stages, resource allocation, user journeys, and other source-to-target relationships.
Simple Example
An rx.recharts.sankey_chart() takes a data dictionary with nodes and links. Links refer to nodes by zero-based index.
Stateful Example
Chart data can be tied to a State var. This example randomizes the flow values when the button is clicked.
Full Node / Link Customization
For complete control over node and link rendering, pass a
@rx.recharts.sankey_chart.node or @rx.recharts.sankey_chart.link decorated
function that returns an svg-based component. The function receives a
Var[SankeyNodeProps] or Var[SankeyLinkProps] object with the node or link
data payload, as well as the object's position and dimensions. You can use these
properties to construct a custom node or link.
Because the component renders inside the SVG element of the chart, you can only
use rx.el.svg components to construct the custom node or link.
The example below also uses rx.recharts.use_chart_width() to read the
rendered chart width and rx.vars.use_id() to generate a unique id that links
each link's gradient definition to the path that references it.
Related Charts
Explore more chart types you can build with Reflex and Recharts in pure Python:
API Reference
rx.recharts.SankeyChart
A Sankey chart component in Recharts.
Props
| Prop | Type | Description |
|---|---|---|
width | Union[int, str] | The width of chart container. String or Integer. |
height | Union[int, str] | The height of chart container. |
name_key | str | The key of each node name. |
data_key | Union[int, str] | The key of each link value. |
data | Union[SankeyData, Mapping] | The source data, including nodes and the weighted links between them. |
margin | Dict[str, Any] | The sizes of whitespace around the chart. |
node | Any | The configuration object or custom renderer used to draw nodes. |
link | Any | The configuration object or custom renderer used to draw links. |
sort | bool | Whether to sort nodes on the y-axis or display them in data order. |
node_padding | int | The padding between nodes. |
node_width | int | The width of each node. |
link_curvature | float | The curvature of each link. |
iterations | int | The number of layout iterations used to position nodes and links. |
Valid Children
LegendGraphingTooltipDefs