Basic Usage
To get a Sankey Chart use ChartType="ChartType.Sankey" to render the configured Nodes and Edges.
<MudPaper Class="doc-section-component-container"> <MudChart ChartType="ChartType.Sankey" Nodes="@_nodes" Edges="@_edges" Width="@_width" Height="@_height" ChartOptions="@_options" NodeChartOptions="_nodeChartOptions"/> </MudPaper> <MudGrid> <MudItem md="6" xs="12"> <MudTextField @bind-Value="_width" Label="Chart Width"></MudTextField> </MudItem> <MudItem md="6" xs="12"> <MudTextField @bind-Value="_height" Label="Chart Height"></MudTextField> </MudItem> <MudItem md="4" xs="12"> <MudSlider @bind-Value="_nodeChartOptions.NodeWidth" Max="50" ValueLabel="true">Node width</MudSlider> </MudItem> <MudItem md="4" xs="12"> <MudSlider @bind-Value="_nodeChartOptions.MinVerticalSpacing" Max="30" ValueLabel="true">Min. vertical spacing</MudSlider> </MudItem> <MudItem md="4" xs="12"> <MudSlider @bind-Value="_nodeChartOptions.EdgeOpacity" Step="0.01" Max="1" ValueLabel="true">Edge opacity</MudSlider> </MudItem> </MudGrid>
@code { private ChartOptions _options = new(); private NodeChartOptions _nodeChartOptions = new(); private string _width = "650px"; private string _height = "350px"; private readonly List<SankeyChartNode> _nodes = [ new("Income", 0), // Income new("Expenses", 1), new("Savings", 1), // Expenses new("Housing", 2), new("Food", 2), new("Insurance", 2), new("Mobility", 2), new("Travel", 2), new("Leisure", 2), // Savings new("Interest", 2), new("Stocks", 2), // Housing new("Rent", 3), new("Other", 3), // Insurance new("Home insurance", 3), new("Car insurance", 3), new("Health insurance", 3), // Travel new("Car", 3), new("Public transport", 3), ]; private readonly List<SankeyChartEdge> _edges = [ // Income new("Income", "Expenses", 2800), new("Income", "Savings", 400), // Expenses new("Expenses", "Housing", 1200), new("Expenses", "Food", 500), new("Expenses", "Insurance", 250), new("Expenses", "Mobility", 125), new("Expenses", "Travel", 425), new("Expenses", "Leisure", 300), // Savings new("Savings", "Interest", 10), new("Savings", "Stocks", 390), // Housing new("Housing", "Rent", 950), new("Housing", "Other", 250), // Insurance new("Insurance", "Home insurance", 50), new("Insurance", "Car insurance", 75), new("Insurance", "Health insurance", 125), // Travel new("Travel", "Car", 300), new("Travel", "Public transport", 125), ]; }
Customization
The Sankey Chart can be further customised using ChartOptions, NodeChartOptions or the options within the
SankeyChartNode class.
@using MudBlazor.Utilities <MudPaper Class="doc-section-component-container"> <MudChart ChartType="ChartType.Sankey" Nodes="@_nodes" Edges="@_edges" Width="@_width" Height="@_height" ChartOptions="@_options" NodeChartOptions="_nodeChartOptions"/> </MudPaper> <MudGrid> <MudItem md="6" xs="12"> <MudColorPicker Label="Color good" @bind-Value="@_nodes[^2].Color"/> </MudItem> <MudItem md="6" xs="12"> <MudColorPicker Label="Color evil" @bind-Value="@_nodes[^1].Color"/> </MudItem> <MudItem md="3" xs="12"> <MudCheckBox @bind-Value="_options.ShowLabels" Label="Show labels"></MudCheckBox> </MudItem> <MudItem sm="3" xs="12"> <MudCheckBox @bind-Value="_nodeChartOptions.ShowNodeValues" Label="Show node values"></MudCheckBox> </MudItem> <MudItem md="6" xs="12"> <MudSelect @bind-Value="_nodeChartOptions.LabelFontSize" Label="Label font size"> <MudSelectItem Value="@("0.5rem")">0.5rem</MudSelectItem> <MudSelectItem Value="@("0.75rem")">0.75rem</MudSelectItem> <MudSelectItem Value="@("1rem")">1rem</MudSelectItem> <MudSelectItem Value="@("1.25rem")">1.25rem</MudSelectItem> <MudSelectItem Value="@("1.5rem")">1.5rem</MudSelectItem> </MudSelect> </MudItem> <MudItem md="3" sm="6" xs="12"> <MudSwitch T="bool" ValueChanged="LabelSwitchValueChanged" Label="@(_options.ShowLabels ? "Show edge values" : "Show node values")"></MudSwitch> </MudItem> <MudItem md="3" sm="6" xs="12"> <MudCheckBox @bind-Value="_nodeChartOptions.HighlightOnHover" Label="Highlight on hover"></MudCheckBox> </MudItem> <MudItem md="6" xs="12"> <MudColorPicker Label="Highlighting color" @bind-Text="@_nodeChartOptions.HighlightColor"/> </MudItem> </MudGrid>
@code { private ChartOptions _options = new(); private NodeChartOptions _nodeChartOptions = new(); private string _width = "650px"; private string _height = "350px"; private readonly List<SankeyChartNode> _nodes = [ new("Dogs", 0), new("Dachshund", 1), new("Bernese", 1), new("Chihuahua", 1), new("Good boy", 2), new("Pure evil", 2), ]; private readonly List<SankeyChartEdge> _edges = [ new("Dogs", "Dachshund", 10), new("Dogs", "Bernese", 10), new("Dogs", "Chihuahua", 10), new("Dachshund", "Good boy", 10), new("Bernese", "Good boy", 10), new("Chihuahua", "Pure evil", 10), ]; private void LabelSwitchValueChanged(bool value) { _options.ShowLabels = !value; _nodeChartOptions.ShowEdgeLabels = value; } }
Events
The only event the Sankey Chart currently provides is the selected index one for nodes.
Node selected:
<MudPaper Class="doc-section-component-container"> <MudChart ChartType="ChartType.Sankey" Nodes="@_nodes" Edges="@_edges" Width="@_width" Height="@_height" @bind-SelectedIndex="_SelectedIndex"/> </MudPaper> <MudGrid> <MudItem xs="12"> <MudText>Node selected: @(_SelectedIndex >= 0 ? _nodes[_SelectedIndex].Name : "")</MudText> </MudItem> </MudGrid>
@code { private string _width = "650px"; private string _height = "350px"; private int _SelectedIndex = -1; private readonly List<SankeyChartNode> _nodes = [ new("Balls", 0), new("Soccer ball", 1), new("Football", 1), new("Tennis ball", 1), new("Good condition", 2), new("Bad condition", 2), ]; private readonly List<SankeyChartEdge> _edges = [ new("Balls", "Soccer ball", 20), new("Balls", "Football", 10), new("Balls", "Tennis ball", 30), new("Soccer ball", "Good condition", 17), new("Soccer ball", "Bad condition", 3), new("Football", "Good condition", 5), new("Football", "Bad condition", 5), new("Tennis ball", "Good condition", 10), new("Tennis ball", "Bad condition", 20), ]; }