Charts

TwLollipopChart

TwLollipopChart is a Blazor lollipop chart: a thin stem and a dot per value. A lighter alternative to bars when there are many categories.

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

TwLollipopChart draws a thin stem ending in a dot for each value. It reads like a column chart with far less ink, which keeps a chart with many similar values from turning into a wall of color.

Revenue by regionThousands of pounds

RAZOR

<TwChart Title="Revenue by region" Description="Thousands of pounds">
    <TwLollipopChart Categories="@_regions" Series="@_revenue" />
</TwChart>

CSHARP

@code {
    private readonly string[] _regions = ["North", "South", "East", "West"];
    
    private readonly ChartSeries[] _revenue = [new("Revenue", [420, 310, 275, 380])];
    
    private readonly ChartSeries[] _yearly =
    [
        new("2024", [360, 290, 240, 330]),
        new("2025", [420, 310, 275, 380])
    ];
}

Horizontal

Set Horizontal to run the stems left to right with the categories listed down the side, which gives long labels room.

Revenue by region

RAZOR

<TwChart Title="Revenue by region">
    <TwLollipopChart Categories="@_regions" Series="@_revenue" Horizontal="true" ShowValues="true" />
</TwChart>

Several series

With more than one series, each category shows a lollipop per series side by side.

Revenue by region and year

RAZOR

<TwChart Title="Revenue by region and year">
    <TwLollipopChart Categories="@_regions" Series="@_yearly" />
</TwChart>

Summary

Tooltips and the table view give the value of every series for each category.

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.

TwLollipopChart

Basic usage

Horizontal

Several series

Summary

Shared features

Keyboard navigation