RidgelineChart: Blazor ridgeline chart component

Examples

Basic

Groups are drawn top to bottom in order. By default the tallest peak rises 1.6 rows, so curves overlap the row above.

Sign-in time of day, by weekday

website/Examples/Charts/RidgelineChartBasicExample.razor Source

Overlap and bandwidth

Overlap="1" keeps each curve within its own row; Bandwidth (in value units) applies the same smoothing to every group.

website/Examples/Charts/RidgelineChartOverlapExample.razor Source

Playground

Sign-in time of day, by weekday

ValueTitle

Overlap

Bandwidth

Title

ShowTitle

AspectRatio

RowHeight

<RidgelineChart
                ValueTitle="Hour of day (UTC)"
                Title="Sign-in time of day, by weekday"
                Groups="@_days" />

@code {
    // Weekdays peak in the morning and after lunch; weekends are later and flatter.
    private readonly ValueGroup[] _days =
    [
        .. new[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" }.Select((day, i) => new ValueGroup(day,
            [.. DistributionSamples.Normal(seed: 80 + i, count: 300, mean: 9.5, sd: 1.4, min: 0), .. DistributionSamples.Normal(seed: 90 + i, count: 220 - 20 * i, mean: 14.5, sd: 1.8)])),
        new("Saturday", DistributionSamples.Normal(seed: 86, count: 160, mean: 13, sd: 3.5, min: 0)),
        new("Sunday", DistributionSamples.Normal(seed: 87, count: 140, mean: 15, sd: 3.8, min: 0)),
    ];
}

API

<RidgelineChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Bandwidth double
= 0
Kernel bandwidth in value units: smaller shows more bumps, larger smooths them out. 0 picks one per group (Silverman's rule).
Groups IReadOnlyList<ValueGroup>
= []
The groups, one row each from top to bottom, with their raw values. Values that are not finite numbers are ignored; empty groups are not drawn.
Overlap double
= 1.6
How many rows the tallest peak rises above its baseline. Above 1, curves overlap the rows above them.
RowHeight double?
= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
ShowTitle bool
= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
Title string
= null
Optional heading rendered above the chart; it is also the chart's accessible name.
ValueTitle string
= null
Title of the value axis, e.g. "Response time (ms)".
Width string
= "100%"
CSS width of the chart wrapper.
Class string
= null
Additional CSS classes merged onto the w-full wrapper.
Style string
= null
Inline styles appended after the width on the wrapper.

Name	Type	Default	Description
AspectRatio	double	1.78	Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Bandwidth	double	0	Kernel bandwidth in value units: smaller shows more bumps, larger smooths them out. 0 picks one per group (Silverman's rule).
Groups	IReadOnlyList<ValueGroup>	[]	The groups, one row each from top to bottom, with their raw values. Values that are not finite numbers are ignored; empty groups are not drawn.
Overlap	double	1.6	How many rows the tallest peak rises above its baseline. Above 1, curves overlap the rows above them.
RowHeight	double?	null	Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
ShowTitle	bool	true	Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
Title	string	null	Optional heading rendered above the chart; it is also the chart's accessible name.
ValueTitle	string	null	Title of the value axis, e.g. "Response time (ms)".
Width	string	"100%"	CSS width of the chart wrapper.
Class	string	null	Additional CSS classes merged onto the w-full wrapper.
Style	string	null	Inline styles appended after the width on the wrapper.

ValueGroup

DaisyBlazor.Charts

A named set of raw values, summarised by BoxPlotChart, ViolinChart, BeeswarmChart and RidgelineChart. Values that are not finite numbers are ignored; a group with none left is not drawn.

Properties

Color string
Optional CSS colour; falls back to the theme palette by position.
Name string
Group label, shown on the axis and in tooltips.
Values IReadOnlyList<double>
The raw observations.

Name	Type	Description
Color	string	Optional CSS colour; falls back to the theme palette by position.
Name	string	Group label, shown on the axis and in tooltips.
Values	IReadOnlyList<double>	The raw observations.

Methods

<Clone>$ () → ValueGroup
Deconstruct (String& Name, IReadOnlyList`1& Values, String& Color) → void
Equals (object obj) → bool
Equals (ValueGroup other) → bool
GetHashCode () → int
ToString () → string

Name	Signature	Description
<Clone>$	() → ValueGroup
Deconstruct	(String& Name, IReadOnlyList`1& Values, String& Color) → void
Equals	(object obj) → bool
Equals	(ValueGroup other) → bool
GetHashCode	() → int
ToString	() → string