Charts

TwBulletChart

TwBulletChart is a Blazor bullet chart that benchmarks an actual value against a target, with shaded bands for qualitative ranges.

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

TwBulletChart shows, for each measure, a bar for the actual value and a marker for the target. Pass a list of ChartBullet with a label, a value and a target. Each measure has its own scale, so revenue in thousands and a percentage can share one chart.

Quarterly targets

Actual
Target

RAZOR

<TwChart Title="Quarterly targets">
    <TwBulletChart Items="@_targets" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly ChartBullet[] _targets =
    [
        new("Revenue", 270, 250),
        new("Profit", 22, 26),
        new("New customers", 1650, 1500)
    ];
}

Qualitative ranges

Give a bullet a list of Ranges to shade bands behind the bar, for example the limits of poor, fair and good. The darkest band is the lowest range.

Quarterly targets

Actual
Target

RAZOR

<TwChart Title="Quarterly targets">
    <TwBulletChart Items="@_bullets" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly ChartBullet[] _bullets =
    [
        new("Revenue", 270, 250, [150, 225, 300]),
        new("Profit", 22, 26, [15, 22, 30]),
        new("New customers", 1650, 1500, [1000, 1400, 2000])
    ];
}

Labels

ValueLabel and TargetLabel rename the two values in the legend, tooltips and table view.

Quarterly targets

This quarter
Plan

RAZOR

<TwChart Title="Quarterly targets">
    <TwBulletChart Items="@_bullets" ValueLabel="This quarter" TargetLabel="Plan" Height="ChartHeight.Small" />
</TwChart>

Summary

Tooltips and the table view give the actual value and the target of each measure.

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.

TwBulletChart

Basic usage

Qualitative ranges

Labels

Summary

Shared features

Keyboard navigation