Charts

TwHexbinChart

TwHexbinChart is a Blazor hexbin chart that tiles the plot with hexagons shaded by how many points fall in each, for scatter data too dense to read.

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

TwHexbinChart takes the same ChartPointSeries as a scatter plot, tiles the plot with hexagons and shades each by how many points fall inside it. Use it when there are so many points that dots would pile into a blob.

Session length against pages viewedOne point per session

RAZOR

<TwChart Title="Session length against pages viewed" Description="One point per session">
    <TwHexbinChart Series="@_sessions" XTitle="Minutes" YTitle="Pages" />
</TwChart>

CSHARP

@code {
    // A repeatable cloud of 400 sessions: longer sessions view more pages, with some scatter.
    private readonly ChartPointSeries[] _sessions =
    [
        new("Sessions", [.. Enumerable.Range(0, 400).Select(index =>
        {
            var minutes = 2 + index % 37 * 0.6 + Math.Sin(index * 1.7) * 3;
            var pages = 1 + minutes * 0.45 + Math.Cos(index * 2.3) * 2.5;
            return new ChartPoint(Math.Max(0.5, minutes), Math.Max(1, pages));
        })])
    ];
}

Bin size

BinWidth is the width of a hexagon as a percentage of the plot's width, from 4 to 25. Smaller hexagons show finer detail but need more points to fill; larger ones smooth out the noise.

FineBinWidth 6

CoarseBinWidth 16

RAZOR

<div class="grid gap-8 md:grid-cols-2">
    <TwChart Title="Fine" Description="BinWidth 6">
        <TwHexbinChart Series="@_sessions" BinWidth="6" XTitle="Minutes" YTitle="Pages" Height="ChartHeight.Small" />
    </TwChart>
    <TwChart Title="Coarse" Description="BinWidth 16">
        <TwHexbinChart Series="@_sessions" BinWidth="16" XTitle="Minutes" YTitle="Pages" Height="ChartHeight.Small" />
    </TwChart>
</div>

Several series

Every series is combined into one cloud before counting, so you can pass data in whatever groups you hold it in. Here two clusters of readings show as two dark patches.

Sensor readingsTemperature against humidity

RAZOR

<TwChart Title="Sensor readings" Description="Temperature against humidity">
    <TwHexbinChart Series="@_readings" XTitle="Temperature" YTitle="Humidity" CountLabel="Readings" BinWidth="8" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartPointSeries[] _readings =
    [
        new("Greenhouse", [.. Enumerable.Range(0, 180).Select(index => new ChartPoint(27 + Math.Sin(index * 0.9) * 3, 72 + Math.Cos(index * 1.3) * 8))]),
        new("Warehouse", [.. Enumerable.Range(0, 180).Select(index => new ChartPoint(16 + Math.Sin(index * 1.1) * 4, 41 + Math.Cos(index * 0.7) * 6))])
    ];
}

When to use

Use a hexbin chart when a scatter plot has too many points to tell apart. Shading uses a single hue, so darker always means more points, and hexagons with no points are left out. For fewer points use TwScatterChart.

Summary

Tooltips and the table view give the average position and the count of the points in each hexagon.

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.

TwHexbinChart

Basic usage

Bin size

Several series

When to use

Summary

Shared features

Keyboard navigation