Charts

TwViolinPlotChart

TwViolinPlotChart is a Blazor violin plot that shows the full shape of each group's distribution with its median and middle half marked.

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

TwViolinPlotChart draws a mirrored density curve for each ChartSample: wide where values cluster, narrow where they are rare. The bar down the middle spans the middle half of the values and the dot marks the median.

Exam scores by classPercent

RAZOR

<TwChart Title="Exam scores by class" Description="Percent">
    <TwViolinPlotChart Samples="@_classes" />
</TwChart>

CSHARP

@code {
    private readonly ChartSample[] _classes =
    [
        new("Class A", [48, 55, 58, 61, 63, 64, 66, 67, 69, 71, 74, 78, 85]),
        new("Class B", [52, 60, 66, 70, 72, 74, 75, 76, 78, 80, 83, 88, 94]),
        new("Class C", [35, 42, 51, 57, 62, 68, 71, 77, 82, 86, 90])
    ];
}

Shapes a box plot hides

These two teams have almost the same median and quartiles, so their box plots would look alike. The violins show that one is evenly spread while the other splits into a fast group and a slow group.

Ticket resolution timeHours

RAZOR

<TwChart Title="Ticket resolution time" Description="Hours">
    <TwViolinPlotChart Samples="@_teams" LabelHeader="Team" ValueFormat="0 h" />
</TwChart>

CSHARP

@code {
    private readonly ChartSample[] _teams =
    [
        new("Evenly spread", [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]),
        new("Two groups", [2, 3, 3, 4, 4, 5, 20, 21, 21, 22, 23, 24])
    ];
}

Horizontal

Set Horizontal to list the groups down the side, which suits long names and many groups.

Exam scores by class

RAZOR

<TwChart Title="Exam scores by class">
    <TwViolinPlotChart Samples="@_classes" Horizontal="true" />
</TwChart>

When to use

Use a violin plot when the shape of each distribution matters. Each violin is drawn to the full width of its slot and ends at the group's lowest and highest values, so compare the shapes, not the widths. For a plain summary use TwBoxPlotChart.

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.

TwViolinPlotChart

Basic usage

Shapes a box plot hides

Horizontal

When to use

Summary

Shared features

Keyboard navigation