Charts

TwRidgelinePlotChart

TwRidgelinePlotChart is a Blazor ridgeline plot that gives each group its own row and density curve, for comparing many distributions.

Last updated 18 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

TwRidgelinePlotChart draws one density curve per ChartSample, each on its own row with its name on the axis. Where a density plot overlays its curves, a ridgeline keeps them apart, so it copes with many more groups.

Delivery time by monthDays from order to delivery

RAZOR

<TwChart Title="Delivery time by month" Description="Days from order to delivery">
    <TwRidgelinePlotChart Samples="@_deliveries" />
</TwChart>

CSHARP

@code {
    private readonly ChartSample[] _deliveries =
    [
        new("January", [3, 4, 4, 5, 5, 5, 6, 6, 7, 8, 9]),
        new("February", [2, 3, 3, 4, 4, 4, 5, 5, 6, 7]),
        new("March", [1, 2, 2, 2, 3, 3, 3, 4, 4, 5])
    ];
}

Many groups

Order the groups so a drift is easy to follow. Here the daily temperature shifts up and back down across the year. A larger Height gives each ridge more room.

Daily high temperatureDegrees Celsius, by month

RAZOR

<TwChart Title="Daily high temperature" Description="Degrees Celsius, by month">
    <TwRidgelinePlotChart Samples="@_temperatures" LabelHeader="Month" ValueFormat="0°" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartSample[] _temperatures =
    [
        new("Jan", [4, 5, 6, 6, 7, 8, 8, 9, 10, 11]),
        new("Mar", [7, 8, 9, 10, 10, 11, 12, 13, 14, 15]),
        new("May", [13, 14, 15, 16, 17, 17, 18, 19, 20, 22]),
        new("Jul", [18, 20, 21, 22, 23, 23, 24, 25, 27, 30]),
        new("Sep", [14, 16, 17, 18, 18, 19, 20, 21, 22, 24]),
        new("Nov", [6, 7, 8, 9, 9, 10, 11, 12, 13, 14])
    ];
}

Side by side

Groups are listed top to bottom by default. Set Horizontal to false to stand the ridges side by side with values running up the plot.

Delivery time by month

RAZOR

<TwChart Title="Delivery time by month">
    <TwRidgelinePlotChart Samples="@_deliveries" Horizontal="false" />
</TwChart>

When to use

Use a ridgeline plot to compare the shape of many distributions. Each ridge is scaled to the height of its own row, so compare where the ridges sit and how wide they are, not how tall. For two or three groups, TwDensityPlotChart puts them on one scale.

Summary

Tooltips and the table view give the count, minimum, lower quartile, median, upper quartile and maximum of each group.

Shared features

The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See TwChart for those options.

The plot is a single Tab stop. Each data point is announced with its series and value as focus reaches it, and the table view presents the same data without the plot.

Key	What it does
`Tab`	Moves focus into the plot, onto the data point last visited.
`Arrow Right` or `Arrow Down`	Moves to the next data point.
`Arrow Left` or `Arrow Up`	Moves to the previous data point.
`Home` or `End`	Moves to the first or last data point.
`Escape`	Hides the tooltip of the focused data point.
`Enter` or `Space`	On a legend item: shows or hides that series. On the table button: switches between the chart and its data table.

TwRidgelinePlotChart

Basic usage

Many groups

Side by side

When to use

Summary

Shared features

Keyboard navigation