ViolinChart: Blazor violin chart component

Examples

Basic

Pass raw values per group. The bar inside each violin spans the quartiles and the dot marks the median.

Deployment duration by pipeline

website/Examples/Charts/ViolinChartBasicExample.razor Source

Horizontal, fixed bandwidth

Bandwidth (in value units) sets the smoothing for every group instead of picking one each; ShowQuartiles="false" leaves only the outline.

website/Examples/Charts/ViolinChartHorizontalExample.razor Source

Playground

Deployment duration by pipeline

Horizontal

ValueTitle

Bandwidth

ShowQuartiles

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<ViolinChart
             ValueTitle="Duration (min)"
             ValueFormat="{0:N1} min"
             Title="Deployment duration by pipeline"
             Groups="@_pipelines" />

@code {
    // The canary pipeline has two humps: most runs pass quickly, some wait for a manual check.
    private readonly ValueGroup[] _pipelines =
    [
        new("Standard", DistributionSamples.Normal(seed: 51, count: 200, mean: 12, sd: 2.5, min: 1)),
        new("Hotfix", DistributionSamples.Normal(seed: 52, count: 120, mean: 6, sd: 1.5, min: 1)),
        new("Canary", [.. DistributionSamples.Normal(seed: 53, count: 140, mean: 14, sd: 2, min: 1), .. DistributionSamples.Normal(seed: 54, count: 80, mean: 26, sd: 3)]),
    ];
}

API

<ViolinChart>

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, each with its raw values. Values that are not finite numbers are ignored; empty groups are not drawn.
Horizontal bool
= false
Lay the violins out in rows, with values along the horizontal axis.
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.
ShowQuartiles bool
= true
Draw a bar from the first to the third quartile and a dot at the median inside each violin.
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.
ValueFormat string
= "{0:#,0.##}"
Format string for values in tooltips and the description, e.g. "{0:N1} min".
ValueTitle string
= null
Title of the value axis, e.g. "Deployment time (min)".
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, each with its raw values. Values that are not finite numbers are ignored; empty groups are not drawn.
Horizontal	bool	false	Lay the violins out in rows, with values along the horizontal axis.
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.
ShowQuartiles	bool	true	Draw a bar from the first to the third quartile and a dot at the median inside each violin.
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.
ValueFormat	string	"{0:#,0.##}"	Format string for values in tooltips and the description, e.g. "{0:N1} min".
ValueTitle	string	null	Title of the value axis, e.g. "Deployment time (min)".
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