Charts

TwBarcodeChart

TwBarcodeChart is a Blazor barcode chart that draws a thin line for every raw observation along one axis, so clusters and gaps stand out.

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

TwBarcodeChart draws a thin vertical line for every value in Values along a single horizontal axis. Clusters show as dense stripes and gaps as white space, without the values being grouped into ranges first.

Response timesMilliseconds

RAZOR

<TwChart Title="Response times" Description="Milliseconds">
    <TwBarcodeChart Values="@_responseTimes" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly double[] _responseTimes = [112, 118, 121, 123, 127, 131, 135, 138, 142, 144, 149, 151, 153, 168, 190, 245, 290];
}

Clusters and gaps

Two tight groups with nothing between them is a pattern a histogram can blur if a bin happens to straddle the gap. On a barcode chart it is unmistakable.

Eruption lengthMinutes

RAZOR

<TwChart Title="Eruption length" Description="Minutes">
    <TwBarcodeChart Values="@_eruptions" ValueFormat="0.0 min" ValueLabel="Length" CountLabel="Eruptions" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly double[] _eruptions =
    [
        1.7, 1.8, 1.8, 1.9, 1.9, 2.0, 2.0, 2.1, 2.2, 2.3, 2.4, 3.6, 3.8, 3.9, 4.0, 4.1, 4.1, 4.2, 4.3, 4.3,
        4.4, 4.5, 4.5, 4.6, 4.7, 4.8, 4.9, 5.0
    ];
}

Repeated values

Values that repeat share one line, and its tooltip and table row give how many observations it stands for. Use ValueLabel and CountLabel to name the two columns.

Order sizesItems per order

RAZOR

<TwChart Title="Order sizes" Description="Items per order">
    <TwBarcodeChart Values="@_orderSizes" ValueLabel="Items" CountLabel="Orders" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly double[] _orderSizes = [1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 4, 4, 5, 6, 6, 8, 12, 12, 24];
}

When to use

A barcode chart suits a few dozen to a few hundred observations. Beyond that the lines merge, and TwHistogramChart or TwDensityPlotChart is the better choice.

Summary

Tooltips and the table view give each value and the count of observations that share it. The arrow keys step through the values from lowest to highest.

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.

TwBarcodeChart

Basic usage

Clusters and gaps

Repeated values

When to use

Summary

Shared features

Keyboard navigation