Charts

TwWordCloudChart

TwWordCloudChart is a Blazor word cloud: words sized by their values and gathered around the middle of the plot.

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

TwWordCloudChart takes labelled values as Data and draws each label as a word sized by its value, with the largest in the middle. It gives a quick impression of which terms dominate.

Search termsSearches last month

RAZOR

<TwChart Title="Search terms" Description="Searches last month">
    <TwWordCloudChart Data="@_terms" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _terms =
    [
        new("pricing", 50), new("login", 38), new("invoice", 30), new("export", 24),
        new("api", 20), new("refund", 14), new("password", 12), new("teams", 9)
    ];
}

Many words

As words are added they all shrink together to fit. A larger Height gives them more room. Use LabelHeader and ValueHeader to name the columns of the table view; the value heading also labels tooltips.

Words in customer feedbackMentions this quarter

RAZOR

<TwChart Title="Words in customer feedback" Description="Mentions this quarter">
    <TwWordCloudChart Data="@_feedback" LabelHeader="Word" ValueHeader="Mentions" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _feedback =
    [
        new("fast", 182), new("support", 164), new("easy", 151), new("price", 139), new("reliable", 118),
        new("dashboard", 104), new("setup", 96), new("mobile", 88), new("reports", 81), new("slow", 74),
        new("billing", 69), new("search", 63), new("helpful", 58), new("export", 52), new("confusing", 47),
        new("integration", 43), new("clean", 39), new("updates", 35), new("login", 31), new("onboarding", 28),
        new("charts", 25), new("filters", 22), new("alerts", 19), new("permissions", 17), new("sync", 15),
        new("templates", 13), new("offline", 11), new("shortcuts", 9), new("themes", 8), new("imports", 7)
    ];
}

Compact

At ChartHeight.Small the words are set smaller to match, which suits a card on a dashboard.

Top tags

RAZOR

<TwChart Title="Top tags">
    <TwWordCloudChart Data="@_tags" Height="ChartHeight.Small" ShowTableToggle="false" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _tags =
    [
        new("blazor", 40), new("tailwind", 32), new("charts", 21), new("a11y", 18), new("dotnet", 15), new("css", 9)
    ];
}

When to use

Use a word cloud for a quick impression, not for exact comparison. The area of a word, not its height, follows its value. When there are more words than fit, the smallest are left out of the plot, and negative and zero values are always left out. For exact comparison use TwBarChart.

Summary

Tooltips and the table view give the value of each word. The arrow keys step through the words from largest to smallest.

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.

TwWordCloudChart

Basic usage

Many words

Compact

When to use

Summary

Shared features

Keyboard navigation