Charts

TwContourChart

TwContourChart is a Blazor contour plot that joins the places where a measured surface has the same value, like height lines on a map.

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

TwContourChart draws contour lines over a surface estimated from scattered samples. Give each ChartPoint its position as X and Y and its measurement as Size. A stronger line marks a higher value, and each sample is drawn as a dot.

Room temperatureDegrees Celsius across the floor, metres from the corner

RAZOR

<TwChart Title="Room temperature" Description="Degrees Celsius across the floor, metres from the corner">
    <TwContourChart Series="@_temperatures" XTitle="East" YTitle="North" ValueTitle="Temperature" />
</TwChart>

CSHARP

@code {
    private readonly ChartPointSeries[] _temperatures =
    [
        new("Sensors",
        [
            new(0, 0, Size: 17.5), new(4, 0, Size: 18.2), new(8, 0, Size: 19.1),
            new(0, 3, Size: 18.4), new(4, 3, Size: 20.6), new(8, 3, Size: 22.3),
            new(0, 6, Size: 19.0), new(4, 6, Size: 21.8), new(8, 6, Size: 24.5)
        ])
    ];
}

Levels

Levels sets how many lines are drawn, from 2 to 10, spaced evenly between the lowest and highest measurement. More lines show the slope in more detail: where they bunch together the surface is steep.

Three levels

Nine levels

RAZOR

<div class="grid gap-8 md:grid-cols-2">
    <TwChart Title="Three levels">
        <TwContourChart Series="@_temperatures" Levels="3" XTitle="East" YTitle="North" Height="ChartHeight.Small" />
    </TwChart>
    <TwChart Title="Nine levels">
        <TwContourChart Series="@_temperatures" Levels="9" XTitle="East" YTitle="North" Height="ChartHeight.Small" />
    </TwChart>
</div>

Two peaks

Closed rings mark a peak or a hollow. This survey has two hills with a saddle between them. Name the samples with Label to title their tooltips.

Signal strengthDecibels across the site, with the two transmitters named

RAZOR

<TwChart Title="Signal strength" Description="Decibels across the site, with the two transmitters named">
    <TwContourChart Series="@_signal" Levels="7" XTitle="X" YTitle="Y" ValueTitle="Signal" ValueFormat="0.#" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    // A 7 by 5 grid of readings that fall away from two transmitters.
    private readonly ChartPointSeries[] _signal =
    [
        new("Transmitters", [new(2, 3, "North mast", 60), new(8, 1.5, "South mast", 52)]),
        new("Survey", [.. Enumerable.Range(0, 35).Select(index =>
        {
            var (x, y) = (index % 7 * 1.6, index / 7 * 1.0);
            var north = 60 / (1 + Math.Pow(x - 2, 2) + Math.Pow(y - 3, 2));
            var south = 52 / (1 + Math.Pow(x - 8, 2) + Math.Pow(y - 1.5, 2));
            return new ChartPoint(x, y, Size: Math.Round(north + south, 1));
        })])
    ];
}

When to use

Use a contour plot for a measurement that varies smoothly across two dimensions. The surface between samples is estimated, so the lines are a guide and the dots are the measurements. Points without a Size are left out, and at least three samples are needed.

Summary

Tooltips and the table view give the position and the value of each sample.

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.

TwContourChart

Basic usage

Levels

Two peaks

When to use

Summary

Shared features

Keyboard navigation