Charts

TwBarChart

TwBarChart is a Blazor bar chart that compares categories with horizontal bars. Supports grouped, stacked, 100% stacked and diverging layouts.

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

TwBarChart draws horizontal bars whose length shows the value of each category. Bars suit long category labels and long lists, because the labels read left to right beside each bar. Pass the category labels as Categories and one or more ChartSeries as Series. For the other direction use TwColumnChart; the parameters are identical.

Revenue by regionThousands of pounds

RAZOR

<TwChart Title="Revenue by region" Description="Thousands of pounds">
    <TwBarChart 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])
    ];
}

Value labels

Set ShowValues to label each bar with its value. It works best with few bars; with many, the axis and tooltips carry the values more cleanly.

Revenue by region

RAZOR

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

Grouped

Pass more than one series and each category shows its series side by side. A legend appears automatically, and clicking an entry hides that series.

Revenue by region and year

RAZOR

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

Stacked

Set Stacking to ChartStacking.Stacked to pile the series on top of each other, so each bar shows the category total as well as its parts.

Revenue by region and year

RAZOR

<TwChart Title="Revenue by region and year">
    <TwBarChart Categories="@_regions" Series="@_yearly" Stacking="ChartStacking.Stacked" />
</TwChart>

100% stacked

ChartStacking.Percent scales every bar to the same length, so the chart compares shares instead of totals. Tooltips and the table view still show the original values.

Share of revenue by year

RAZOR

<TwChart Title="Share of revenue by year">
    <TwBarChart Categories="@_regions" Series="@_yearly" Stacking="ChartStacking.Percent" />
</TwChart>

Diverging

Negative values grow the other way from the baseline. Stack a positive and a negative series to make a diverging chart, for example agreement against disagreement.

The new layout is easier to usePercent of responses

RAZOR

<TwChart Title="The new layout is easier to use" Description="Percent of responses">
    <TwBarChart Categories="@_teams" Series="@_sentiment" Stacking="ChartStacking.Stacked" />
</TwChart>

CSHARP

@code {
    private readonly string[] _teams = ["Design", "Engineering", "Sales", "Support"];
    
    private readonly ChartSeries[] _sentiment =
    [
        new("Agree", [62, 48, 35, 54]),
        new("Disagree", [-18, -30, -41, -22])
    ];
}

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.

TwBarChart

Basic usage

Value labels

Grouped

Stacked

100% stacked

Diverging

Summary

Shared features

Keyboard navigation