Charts

TwDensityPlotChart

TwDensityPlotChart is a Blazor density plot that draws a smooth curve per group showing where its raw values concentrate.

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

TwDensityPlotChart takes groups of raw observations as ChartSample values and draws a smooth curve for each, tall where its values cluster. You pass the observations; the chart estimates the curve.

Checkout timeSeconds

RAZOR

<TwChart Title="Checkout time" Description="Seconds">
    <TwDensityPlotChart Samples="@_checkout" />
</TwChart>

CSHARP

@code {
    private readonly ChartSample[] _checkout =
    [
        new("Checkout", [31, 34, 36, 38, 39, 41, 42, 42, 44, 45, 47, 48, 51, 55, 62, 74])
    ];
}

Comparing groups

Several groups share one axis and one vertical scale, so a taller curve always means a tighter cluster. Each group gets a legend entry; click one to hide its curve and let the axis refit the rest.

Page load time by releaseMilliseconds

RAZOR

<TwChart Title="Page load time by release" Description="Milliseconds">
    <TwDensityPlotChart Samples="@_releases" LabelHeader="Release" ValueFormat="#,0 ms" />
</TwChart>

CSHARP

@code {
    private readonly ChartSample[] _releases =
    [
        new("v1.8", [820, 860, 905, 930, 960, 990, 1010, 1040, 1080, 1150, 1230, 1400]),
        new("v1.9", [640, 690, 720, 745, 760, 790, 805, 830, 870, 910, 980]),
        new("v2.0", [410, 430, 445, 450, 462, 470, 478, 490, 505, 530, 560])
    ];
}

Two peaks

A density plot shows shapes that a box plot hides. Here the same service has a fast cached path and a slow uncached one, which appear as two separate humps.

API latencyMilliseconds, cached and uncached requests together

RAZOR

<TwChart Title="API latency" Description="Milliseconds, cached and uncached requests together">
    <TwDensityPlotChart Samples="@_latency" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly ChartSample[] _latency =
    [
        new("Latency", [18, 20, 21, 22, 22, 23, 24, 25, 26, 28, 31, 140, 152, 158, 161, 165, 170, 174, 181, 190])
    ];
}

When to use

Use a density plot to compare the shape of a few distributions. Curves run a little past the lowest and highest observation so they can fall back to zero, and there is no vertical axis because density has no unit a reader needs. For many groups use TwRidgelinePlotChart.

Summary

Tooltips and the table view give the count, minimum, median 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.

TwDensityPlotChart

Basic usage

Comparing groups

Two peaks

When to use

Summary

Shared features

Keyboard navigation