Jane Doe
Product Designer
@((MarkupString)serviceSvg)
@foreach (Color c in Enum.GetValues())
{
```
## Buttons with icons
Buttons can include icons at the start or end for better visual communication:
```razor
@foreach (Color c in Enum.GetValues())
{
```
## Button states
Buttons can be disabled or set to readonly mode:
```razor
Your account is in good standing. You have 3 active subscriptions.
This card relies on shadow and background contrast alone.
Amount
£2,340.00
Status
Paid
Manage your team and their account permissions.
@foreach (var member in _members)
{
@member.Name
@member.Role
Jack Thompson
Product Designer
£24,500
+12.5% from last month
1,234
+8.2% from last month
567
+3.1% from last month
regardless of context. Defaults to 3. |
| `HeaderContent` | `RenderFragment?` | Gets or sets custom header content rendered below the title. |
| `ChildContent` | `RenderFragment?` | Gets or sets the main content of the card. |
| `Bordered` | `bool` | Gets or sets whether the card has a visible border. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
## Theme
Styled by `TwCardTheme`. Include it by ticking this component on the Theme builder (https://twblazor.com/theme) and replacing `Theme.cs` with the newly generated file. Never write or edit `TwCardTheme` by hand.
---
# TwCarousel
> TwCarousel is a Blazor carousel component. Bind SelectedIndex and configure AutoPlay, AutoPlayInterval, Loop, ShowArrows, ShowIndicators and swipe gestures.
Documentation page: https://twblazor.com/carousel
## Basic carousel
Use `TwCarousel` and `TwCarouselItem` to cycle through a set of slides. Only the active slide is rendered.
```razor
Slide 1
Slide 2
Slide 3
```
## Images: object fit
When a slide's content (e.g. an `![]()
`) doesn't match the carousel's aspect ratio, use Tailwind's `object-fit` utilities to control how it fills the slide's `h-full w-full` space.
```razor
@foreach (var fit in _objectFitOptions)
{
```
```csharp
private static readonly (string Label, string Class)[] _objectFitOptions =
[
("Cover", "object-cover"),
("Contain", "object-contain"),
("Fill", "object-fill"),
("None", "object-none"),
("Scale Down", "object-scale-down"),
];
private string selectedObjectFit = "object-cover";
```
## Autoplay
Set `AutoPlay` to automatically advance slides. A pause/play control is always shown so playback can be stopped, and it also pauses automatically while hovered or focused.
```razor
Slide 1
Slide 2
Slide 3
```
## Indicator color
Set `Color` to customize the active slide indicator's color.
```razor
Slide 1
Slide 2
Slide 3
```
## Without arrows or indicators
Set `ShowArrows` and `ShowIndicators` to `false` to rely on swipe gestures or programmatic navigation only.
```razor
Slide 1
Slide 2
```
## Non-looping
Set `Loop` to `false` to disable the arrow buttons at the first and last slide instead of wrapping around.
```razor
Slide 1
Slide 2
Slide 3
```
## Bound selected index
Bind `SelectedIndex` to control or observe the active slide from outside the carousel.
```razor
Selected slide: @(selectedIndex + 1)
Slide 1
Slide 2
Slide 3
```
## Custom previous/next controls
Set `LeftNavigation` and `RightNavigation` to render your own previous/next controls instead of the default arrow buttons. Each is a `RenderFragment`, so its `context` exposes the carousel's public API (`PreviousSlide`, `NextSlide`, `GoToSlide`, `ToggleAutoPlayPaused`, and more) for your own markup to call.
```razor
Prev
Next
Slide 1
Slide 2
Slide 3
```
## Custom indicators
Set `Indicators` to render your own slide-picker controls instead of the default dots. Its `context` exposes `SelectedIndex` and `GoToSlide` so your markup can both reflect and drive the active slide.
```razor
@for (var i = 0; i < 3; i++)
{
var index = i;
@(index + 1)
}
Slide 1
Slide 2
Slide 3
```
## Keyboard navigation
The arrow keys change slide from anywhere in the carousel, except while you are typing in a field or using a control inside a slide that needs them. An automatic slideshow pauses while the carousel has focus, and starts paused for anyone who has asked their system for reduced motion.
| Key | What it does |
| --- | --- |
| `Tab` or `Shift + Tab` | Moves through the pause button (when the slideshow plays automatically), the slide's own controls, the previous and next buttons, and the slide indicators. |
| `Arrow Left` or `Arrow Right` | Shows the previous or next slide. The two keys swap in a right to left layout. |
| `Enter` or `Space` | Presses the focused button: pause or play, previous, next, or a slide indicator. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwCarousel
Represents a carousel that displays one slide (`TwCarouselItem`) at a time, with optional arrow navigation, slide-picker indicators, swipe gestures, and automatic playback.
| Parameter | Type | Description |
| --- | --- | --- |
| `SelectedIndex` | `int` | Gets or sets the index of the currently displayed slide. Supports two-way binding via `SelectedIndexChanged`. |
| `SelectedIndexChanged` | `EventCallback` | Gets or sets the callback invoked whenever `SelectedIndex` changes, whether from the arrow buttons, an indicator, a keyboard press, a swipe gesture, or automatic playback. |
| `ShowArrows` | `bool` | Gets or sets whether the previous/next arrow buttons are displayed. Default is `true`. |
| `ShowIndicators` | `bool` | Gets or sets whether the slide-picker indicator dots are displayed below the carousel. Default is `true`. |
| `EnableSwipeGesture` | `bool` | Gets or sets whether a horizontal touch swipe switches between slides. Default is `true`. |
| `AutoPlay` | `bool` | Gets or sets whether the carousel automatically advances to the next slide on a timer. A visible pause/play toggle is rendered whenever this is enabled, so playback can always be stopped (WCAG 2.2.2), and playback also pauses automatically while the pointer or keyboard focus is within the carousel. Default is `false`. |
| `AutoPlayInterval` | `TimeSpan` | Gets or sets the delay between automatic slide changes when `AutoPlay` is enabled. Default is 5 seconds. |
| `Loop` | `bool` | Gets or sets whether navigating past the last slide wraps around to the first (and vice versa). When `false`, the arrow buttons are disabled at the boundaries instead. Default is `true`. |
| `Color` | `Color?` | Gets or sets the accent color used for the active slide indicator dot. If `null`, the theme's default indicator color is used. |
| `ButtonColor` | `Color` | Gets or sets the color used for the previous/next arrow buttons and the play/pause toggle. Passed straight through to the underlying `TwButton` (via `TwIcon`) as a filled variant, so it needs no bespoke background classes of its own. Default is `Light`. |
| `ChildContent` | `RenderFragment` | Gets or sets the `TwCarouselItem` children that make up the carousel's slides. |
| `LeftNavigation` | `RenderFragment?` | Gets or sets custom content to render in place of the default previous-slide arrow button. The render fragment's context is this `TwCarousel` instance, giving access to its public API (e.g. `PreviousSlide`, `NextSlide`, `GoToSlide`, `ToggleAutoPlayPaused`, `IsAutoPlayPaused`) so custom controls can drive the carousel. When `null` (default), the built-in previous arrow is rendered instead, subject to `ShowArrows`. |
| `RightNavigation` | `RenderFragment?` | Gets or sets custom content to render in place of the default next-slide arrow button. See `LeftNavigation` for details on the render fragment's context and fallback behavior. |
| `Indicators` | `RenderFragment?` | Gets or sets custom content to render in place of the default slide-picker indicator dots. The render fragment's context is this `TwCarousel` instance, giving access to its public API (e.g. `GoToSlide`, `SelectedIndex`) so custom indicators can drive the carousel. When `null` (default), the built-in indicator dots are rendered instead, subject to `ShowIndicators`. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
### TwCarouselItem
Represents a single slide within a `TwCarousel`.
| Parameter | Type | Description |
| --- | --- | --- |
| `ChildContent` | `RenderFragment` | The content to display while this slide is active. This is a required parameter. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
## Theme
Styled by `TwCarouselTheme`. Include it by ticking this component on the Theme builder (https://twblazor.com/theme) and replacing `Theme.cs` with the newly generated file. Never write or edit `TwCarouselTheme` by hand.
---
# TwChart
> TwChart is the Blazor chart container for over fifty chart types. It adds a title, loading state and shared options. Accessible and script-free.
Documentation page: https://twblazor.com/chart
## Basic usage
`TwChart` is the container: it frames a chart with a title, a description and a loading state. Place one chart component inside it and pass the data. Every chart supplies its own legend, tooltips on hover and keyboard focus, and a table view of the same data.
```razor
```
```csharp
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])
];
```
## Choosing a chart
Start from what the reader needs to see, then pick the chart. Each chart has its own page with examples of every option.
## Title and description
`Title` names the chart, on screen and for assistive technology. Use `Description` for the unit or the period, so the axis does not have to carry it. Both are optional; without a title, give the chart an `AriaLabel`.
```razor
```
## Height
`Height` sets how tall the plot is: `ChartHeight.Small`, `Medium` (the default) or `Large`. Set it on the container, or on a chart to override the container. The width always follows the space available. Radial charts are square, and `Height` sets how wide the square may grow.
```razor
```
## Formatting values
Every chart takes `ValueFormat`, any .NET numeric format string, or `ValueFormatter`, a function, for full control. The format applies to the axis, tooltips, value labels and table view alike, in the current culture.
```razor
```
```razor
```
```csharp
private static string FormatThousands(double value) => $"£{value:0}k";
```
## Legend
A chart with two or more series shows a legend; a single series needs none, because the title names it. Each entry is a button that hides or shows its series, and a series keeps its color while others are hidden. Set `InteractiveLegend` to `false` for a plain legend, or `ShowLegend` to `false` to remove it.
```razor
```
## Table view
"View as table" swaps the plot for a table of the same data, and "View as chart" swaps it back. The table is the accessible alternative to the plot, so only set `ShowTableToggle` to `false` when the same data is available elsewhere on the page. `TableViewLabel`, `ChartViewLabel` and `TableLabel` change the wording.
```razor
```
## Loading and empty states
Set `Loading` on the container to show a placeholder of the right height while data is fetched. A chart with no data shows its `EmptyText` instead of an empty set of axes.
```razor
```
## Accessibility
The chart is a group named by the container's `Title`. Each data point is announced with its values. The plot is a single tab stop: tab into it, then use the arrow, `Home` and `End` keys to move between data points. On a touch screen, tap a data point to show its tooltip. A slice, wedge, ring, ribbon, tile or filled curve responds anywhere on its shape. Focus shows the same tooltip as hover, and `Esc` dismisses it. The table view presents the same data without the plot. Text never takes a series color, direction and status are always named as well as colored, and colors are assigned in a fixed order chosen so neighboring series stay distinguishable for color-blind readers. Keep to eight series or fewer: there are eight colors, and a ninth series would reuse the last.
## Adding your own chart type
Every chart is a small class that describes what to draw. Derive from `TwCategoryChartBase` (categories and series), `TwValueChartBase` (labelled values) or `TwChartBase`, and add marks with the `ChartSceneBuilder`. Positions are percentages of the plot area. The legend, tooltips, keyboard support, table view and theming come from the base class, so a new chart needs no markup or styles of its own.
```csharp
///
/// A custom chart: each value is drawn as a filled track out of 100.
///
public class CompletionChart : TwValueChartBase
{
protected override void BuildMarks(ChartSceneBuilder builder)
{
builder.Horizontal = true;
var band = new ChartBand(Data.Count);
var color = ChartColor.Series(0);
builder.BandAxis([.. Data.Select(item => item.Label)], band);
for (var i = 0; i < Data.Count; i++)
{
var filled = Math.Clamp(Data[i].Value, 0, 100);
builder.Bar(band.Center(i), 6, 0, 100, ChartColor.Track, ChartCorner.All, gap: false);
builder.Bar(band.Center(i), 6, 0, filled, color, ChartCorner.All, gap: false);
builder.BandDatum(band.Center(i), band.Step, Data[i].Label,
[new ChartDatumRow(effectiveValueHeader, FormatValue(Data[i].Value), color)]);
}
}
}
```
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwChart
The container for a chart: it frames any chart component (such as `TwBarChart` or `TwLineChart`) with a title, a description and a loading state.
| Parameter | Type | Description |
| --- | --- | --- |
| `ChildContent` | `RenderFragment?` | Gets or sets the chart to display, for example a `TwColumnChart`. |
| `Title` | `string?` | Gets or sets the title shown above the chart. It also names the chart for assistive technology. |
| `Description` | `string?` | Gets or sets a short description shown under the title, for example the unit or the period covered. |
| `Height` | `ChartHeight` | Gets or sets the height of the plot area for the charts inside the container. |
| `Loading` | `bool` | Gets or sets whether the data is still loading. A placeholder is shown in place of the chart. |
| `LoadingLabel` | `string?` | Gets or sets the text announced by assistive technology while `Loading` is set. Defaults to the localized `Chart_Loading` text ("Loading chart"). |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
## Theme
Styled by `TwChartTheme`. Include it by ticking this component on the Theme builder (https://twblazor.com/theme) and replacing `Theme.cs` with the newly generated file. Never write or edit `TwChartTheme` by hand.
---
# TwArcDiagramChart
> TwArcDiagramChart is a Blazor arc diagram: nodes set out along a line and joined by an arc for every link.
Documentation page: https://twblazor.com/chart/arc-diagram
## Basic usage
`TwArcDiagramChart` sets `ChartGraphNode` values out along a line in the order given and draws an arc above it for every `ChartGraphLink`. The further apart two linked nodes are, the higher their arc. Links refer to nodes by `Id`.
```razor
```
```csharp
private readonly ChartGraphNode[] _topics = [new("a", "Layout"), new("b", "Color"), new("c", "Type"), new("d", "Motion")];
private readonly ChartGraphLink[] _related = [new("a", "b", 2), new("a", "c", 1), new("b", "c", 3), new("a", "d", 1)];
```
## Order reveals structure
The order of the nodes is the design. With the members of each group listed together, links inside a group are short low arcs and the few links between groups rise above them.
```razor
```
```csharp
private readonly ChartGraphNode[] _engineers =
[
new("ana", "Ana"), new("bo", "Bo"), new("cy", "Cy"), new("di", "Di"),
new("eli", "Eli"), new("fay", "Fay"), new("gus", "Gus"), new("hal", "Hal")
];
private readonly ChartGraphLink[] _reviews =
[
new("ana", "bo", 14), new("bo", "cy", 9), new("cy", "di", 11), new("ana", "cy", 6), new("bo", "di", 4),
new("eli", "fay", 12), new("fay", "gus", 8), new("gus", "hal", 10), new("eli", "gus", 5),
new("di", "eli", 3), new("ana", "hal", 1)
];
```
## A sequence
When the nodes have a natural order, such as chapters or stops on a route, arcs show what jumps ahead and what calls back.
```razor
```
```csharp
private readonly ChartGraphNode[] _chapters =
[
new("1", "Ch. 1"), new("2", "Ch. 2"), new("3", "Ch. 3"), new("4", "Ch. 4"), new("5", "Ch. 5"), new("6", "Ch. 6")
];
private readonly ChartGraphLink[] _references = [new("1", "2"), new("2", "3"), new("1", "5"), new("3", "4"), new("4", "6"), new("2", "6")];
```
## When to use
Use an arc diagram when the order of the nodes matters, or to show clusters as runs of short arcs. Links that name a missing node, or join a node to itself, are left out. To show how much flows along each link, use [TwChordDiagramChart](https://twblazor.com/chart/chord-diagram.md).
## Summary
Tooltips and the table view give the source, target and value of each link.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwArcDiagramChart
An arc diagram: nodes set out along a line in the order given, with an arc above the line for every link, the arc reaching higher the further apart its two nodes are.
| Parameter | Type | Description |
| --- | --- | --- |
| `Nodes` | `IReadOnlyList` | Gets or sets the nodes. Each needs a unique `Id`; repeats are left out. |
| `Links` | `IReadOnlyList` | Gets or sets the links between nodes, by node identifier. Links that name a missing node, or join a node to itself, are left out. |
| `SourceHeader` | `string?` | Gets or sets the heading of the column naming where each link starts in the table view. Defaults to the localized `Chart_Source` text ("Source"). |
| `TargetHeader` | `string?` | Gets or sets the heading of the column naming where each link ends in the table view. Defaults to the localized `Chart_Destination` text ("Target"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels a link's value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwAreaChart
> TwAreaChart is a Blazor area chart: a line chart with the space beneath filled. Supports stacked areas and smooth or stepped curves.
Documentation page: https://twblazor.com/chart/area
## Basic usage
`TwAreaChart` is a line chart with the space under each line filled with a light wash, which emphasises volume. The scale always includes zero so the filled area stays honest.
```razor
```
```csharp
private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
private readonly ChartSeries[] _organic = [new("Organic", [42, 48, 55, 61, 58, 70])];
```
## Stacked
Set `Stacked` to pile the series on top of each other, showing how they add up to a total over time. Missing and negative values count as zero when stacked.
```razor
```
```csharp
private readonly ChartSeries[] _visitors =
[
new("Organic", [42, 48, 55, 61, 58, 70]),
new("Paid", [30, 34, 31, 45, 52, 49]),
new("Referral", [12, 15, 21, 19, 26, 33])
];
```
## Curves
`Curve` works as it does on a line chart: `ChartCurve.Smooth` for a spline area and `ChartCurve.Step` for a stepped one.
```razor
```
## Overlapping series
Without stacking, the washes overlap so every line stays visible. Past two or three series, stack them or use [TwSmallMultiplesChart](https://twblazor.com/chart/small-multiples.md) instead.
```razor
```
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwAreaChart
An area chart: a line chart with the space under each line filled, emphasising volume. Set `Stacked` to show how the series add up to a total.
| Parameter | Type | Description |
| --- | --- | --- |
| `Stacked` | `bool` | Gets or sets whether the series are stacked on top of each other (a stacked area chart). |
| `Curve` | `ChartCurve` | Gets or sets how points are joined: straight (line), smooth (spline) or stepped (step line). |
| `ShowMarkers` | `bool?` | Gets or sets whether a dot is drawn at every point. |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwBarChart
> TwBarChart is a Blazor bar chart that compares categories with horizontal bars. Supports grouped, stacked, 100% stacked and diverging layouts.
Documentation page: https://twblazor.com/chart/bar
## 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](https://twblazor.com/chart/column.md); the parameters are identical.
```razor
```
```csharp
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.
```razor
```
## 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.
```razor
```
## 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.
```razor
```
## 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.
```razor
```
## 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.
```razor
```
```csharp
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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwBarChart
A bar chart: horizontal bars whose length shows the value of each category. With several series it becomes a grouped, stacked or 100% stacked bar chart, see `Stacking`.
| Parameter | Type | Description |
| --- | --- | --- |
| `Stacking` | `ChartStacking` | Gets or sets how multiple series share a category: side by side, stacked, or stacked to 100%. |
| `ShowValues` | `bool` | Gets or sets whether each bar is labelled with its value. Ignored when `Stacking` is on. |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# 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.
Documentation page: https://twblazor.com/chart/barcode
## 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.
```razor
```
```csharp
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.
```razor
```
```csharp
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.
```razor
```
```csharp
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](https://twblazor.com/chart/histogram.md) or [TwDensityPlotChart](https://twblazor.com/chart/density-plot.md) 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwBarcodeChart
A barcode chart: a thin line for every observation along a single value axis, so clusters show as dense stripes and gaps as white space.
| Parameter | Type | Description |
| --- | --- | --- |
| `Values` | `IReadOnlyList` | Gets or sets the raw observations to plot. |
| `ValueLabel` | `string?` | Gets or sets the label for an observation's value in the table view. Defaults to the localized `Chart_Value` text ("Value"). |
| `CountLabel` | `string?` | Gets or sets the label for how many observations share a value in tooltips and the table view. Defaults to the localized `Chart_Count` text ("Count"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwBeeswarmChart
> TwBeeswarmChart is a Blazor beeswarm chart that draws every observation as a dot, nudged sideways so none overlap.
Documentation page: https://twblazor.com/chart/beeswarm
## Basic usage
`TwBeeswarmChart` draws every value in a `ChartSample` as a dot along the value axis and moves each one sideways just far enough to clear its neighbors. The swarm widens where values cluster, so you see both the spread and how many values sit at each level.
```razor
```
```csharp
private readonly ChartSample[] _plans =
[
new("Free", [3, 4, 5, 5, 6, 6, 6, 7, 7, 7, 7, 8, 8, 9]),
new("Team", [5, 6, 7, 7, 8, 8, 8, 8, 9, 9, 9, 10]),
new("Enterprise", [6, 7, 8, 8, 9, 9, 9, 9, 10, 10, 10])
];
```
## Clusters and outliers
Because no dot is hidden behind another, repeated values and stragglers are both easy to spot. Here most builds finish in about four minutes, with a handful of slow ones on the main branch.
```razor
```
```csharp
private readonly ChartSample[] _builds =
[
new("main", [3.8, 3.9, 4.0, 4.0, 4.1, 4.1, 4.1, 4.2, 4.2, 4.3, 4.3, 4.4, 4.6, 7.9, 8.4, 11.2]),
new("release", [4.4, 4.5, 4.6, 4.6, 4.7, 4.8, 4.8, 4.9, 5.0, 5.2]),
new("feature", [2.9, 3.1, 3.3, 3.4, 3.6, 3.7, 3.9, 4.0, 4.4, 4.9, 5.5, 6.1])
];
```
## Horizontal
Set `Horizontal` to list the groups down the side with values running left to right.
```razor
```
## When to use
A beeswarm suits tens of values per group. A cluster too large for its group's slot overlaps at the edges, so for hundreds of values prefer [TwViolinPlotChart](https://twblazor.com/chart/violin-plot.md) or [TwBoxPlotChart](https://twblazor.com/chart/box-plot.md).
## Summary
Tooltips and the table view give the count, minimum, lower quartile, median, upper quartile and maximum of each group.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwBeeswarmChart
A beeswarm chart: every observation drawn as a dot along the value axis, nudged sideways just far enough that no two dots overlap, so both the spread and the number of values at each level are visible.
| Parameter | Type | Description |
| --- | --- | --- |
| `Samples` | `IReadOnlyList` | Gets or sets the groups of raw observations to plot. |
| `Horizontal` | `bool` | Gets or sets whether groups are listed top to bottom with values running left to right. |
| `LabelHeader` | `string?` | Gets or sets the heading of the group column in the table view. Defaults to the localized `Chart_Group` text ("Group"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwBoxPlotChart
> TwBoxPlotChart is a Blazor box plot that summarises groups of raw values by median, quartiles, whiskers and outliers.
Documentation page: https://twblazor.com/chart/box-plot
## Basic usage
`TwBoxPlotChart` summarises each `ChartSample` of raw observations. The box spans the middle half of the values with a line at the median. Whiskers reach the furthest values within 1.5 times the length of the box, and anything beyond is drawn as an outlier dot.
```razor
```
```csharp
private readonly ChartSample[] _services =
[
new("Search", [112, 120, 131, 135, 138, 142, 144, 149, 151, 153, 290]),
new("Checkout", [156, 158, 160, 163, 167, 170, 172, 176, 181, 185]),
new("Reports", [190, 196, 204, 215, 228, 240, 262, 150, 310])
];
```
## Horizontal
Set `Horizontal` to list the groups down the side, which suits long labels and many groups.
```razor
```
## Summary
Tooltips and the table view give the count, minimum, lower quartile, median, upper quartile and maximum of each group.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwBoxPlotChart
A box plot: for each group, a box spanning the middle half of the values with a line at the median, whiskers reaching to the furthest values within 1.5 times the box's length, and dots for outliers beyond them.
| Parameter | Type | Description |
| --- | --- | --- |
| `Samples` | `IReadOnlyList` | Gets or sets the groups of raw observations to plot. |
| `Horizontal` | `bool` | Gets or sets whether groups are listed top to bottom with values running left to right. |
| `LabelHeader` | `string?` | Gets or sets the heading of the group column in the table view. Defaults to the localized `Chart_Group` text ("Group"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwBulletChart
> TwBulletChart is a Blazor bullet chart that benchmarks an actual value against a target, with shaded bands for qualitative ranges.
Documentation page: https://twblazor.com/chart/bullet
## 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.
```razor
```
```csharp
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.
```razor
```
```csharp
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.
```razor
```
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwBulletChart
A bullet chart: for each measure, a bar showing the actual value, a marker showing the target and optional shaded bands for qualitative ranges such as poor, fair and good.
| Parameter | Type | Description |
| --- | --- | --- |
| `Items` | `IReadOnlyList` | Gets or sets the measures to plot. |
| `LabelHeader` | `string?` | Gets or sets the heading of the label column in the table view. Defaults to the localized `Chart_Measure` text ("Measure"). |
| `ValueLabel` | `string?` | Gets or sets the label for the actual value. Defaults to the localized `Chart_Actual` text ("Actual"). |
| `TargetLabel` | `string?` | Gets or sets the label for the target value. Defaults to the localized `Chart_Target` text ("Target"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwBumpAreaChart
> TwBumpAreaChart is a Blazor bump area chart: a band per series that is as thick as its value and moves as its rank changes.
Documentation page: https://twblazor.com/chart/bump-area
## Basic usage
`TwBumpAreaChart` draws a band for each series. At every category the bands are stacked from the largest value at the top to the smallest at the bottom, so a band climbs when its series overtakes another and its thickness shows by how much it leads.
```razor
```
```csharp
private readonly string[] _years = ["2021", "2022", "2023", "2024", "2025"];
private readonly ChartSeries[] _platforms =
[
new("Atlas", [42, 38, 33, 30, 26]),
new("Beacon", [30, 32, 36, 39, 44]),
new("Comet", [28, 30, 31, 31, 30])
];
```
## Changing leaders
With more series and more crossings the chart tells the story of a race. Where a [TwBumpChart](https://twblazor.com/chart/bump.md) shows only the order, the band thickness here also shows when the leader was far ahead and when the field was close.
```razor
```
```csharp
private readonly string[] _quarters = ["Q1 23", "Q2 23", "Q3 23", "Q4 23", "Q1 24", "Q2 24", "Q3 24", "Q4 24"];
private readonly ChartSeries[] _browsers =
[
new("Falcon", [38, 36, 33, 30, 27, 25, 22, 20]),
new("Otter", [24, 26, 29, 32, 35, 37, 40, 43]),
new("Lynx", [20, 19, 19, 18, 17, 17, 16, 15]),
new("Heron", [12, 13, 12, 13, 14, 13, 14, 13]),
new("Wren", [6, 6, 7, 7, 7, 8, 8, 9])
];
```
## Late arrivals
Use `null` where a series has no value. Its band starts, stops or breaks there, and the other bands close the gap.
```razor
```
```csharp
private readonly ChartSeries[] _products =
[
new("Hardware", [4.2, 4.0, 3.6, 3.1, 2.8]),
new("Software", [2.1, 2.9, 3.8, 4.6, 5.2]),
new("Services", [null, null, 0.9, 1.8, 3.4])
];
```
## When to use
Use a bump area chart when both the order of the series and the size of the lead matter. When only the order matters, [TwBumpChart](https://twblazor.com/chart/bump.md) is simpler. Negative values count as zero.
## Summary
Tooltips and the table view give the value of every series for each category. Tooltips also give the rank of each series. The arrow keys move down each category in rank order, then on to the next.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwBumpAreaChart
A bump area chart: a band for each series that is as thick as its value and moves up or down as its rank among the series changes, showing both who leads and by how much.
| Parameter | Type | Description |
| --- | --- | --- |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwBumpChart
> TwBumpChart is a Blazor bump chart that tracks how series rank against each other across categories, with the highest value ranked first.
Documentation page: https://twblazor.com/chart/bump
## Basic usage
`TwBumpChart` plots rank instead of value: in each category the series with the highest value is ranked first. Lines cross where one series overtakes another. Each line is labelled at its end, and tooltips give both the rank and the value.
```razor
```
```csharp
private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
private readonly ChartSeries[] _visitors =
[
new("Organic", [42, 48, 30, 61, 58, 70]),
new("Paid", [30, 34, 51, 45, 62, 49]),
new("Referral", [12, 40, 41, 19, 26, 55])
];
```
## Labels
`RankLabel` renames the rank in tooltips.
```razor
```
## When to use
A bump chart hides how far apart the values are. When the size of the lead matters, use [TwLineChart](https://twblazor.com/chart/line.md).
## Summary
Tooltips and the table view give the value of every series for each category. Tooltips also give the rank of each series.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwBumpChart
A bump chart: lines that track how each series ranks against the others across the categories. The highest value in a category ranks first.
| Parameter | Type | Description |
| --- | --- | --- |
| `RankLabel` | `string?` | Gets or sets the label for the rank in tooltips. Defaults to the localized `Chart_Rank` text ("Rank"). |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwCandlestickChart
> TwCandlestickChart is a Blazor candlestick chart showing the open, high, low and close of each period. Also draws OHLC charts.
Documentation page: https://twblazor.com/chart/candlestick
## Basic usage
`TwCandlestickChart` draws, for each `ChartOhlc` period, a body between the open and the close and a wick reaching the high and the low. Rising and falling periods differ by color, and the legend and tooltips name the direction.
```razor
```
```csharp
private readonly ChartOhlc[] _prices =
[
new("Jan 02", 102.00, 103.76, 101.42, 103.40),
new("Jan 03", 104.68, 105.31, 102.88, 104.80),
new("Jan 06", 104.80, 105.27, 102.54, 103.10),
new("Jan 07", 103.10, 106.24, 102.76, 105.60),
new("Jan 08", 101.90, 109.20, 101.20, 107.20),
new("Jan 09", 107.20, 107.91, 104.48, 105.30),
new("Jan 10", 105.95, 107.30, 103.70, 106.10),
new("Jan 13", 106.10, 109.23, 105.72, 108.40),
new("Jan 14", 108.40, 109.08, 106.12, 107.00),
new("Jan 15", 108.00, 108.80, 101.50, 104.10),
new("Jan 16", 104.10, 104.87, 101.98, 102.80),
new("Jan 17", 102.80, 104.23, 102.16, 103.70),
new("Jan 20", 103.70, 104.08, 100.94, 101.90),
new("Jan 21", 104.80, 105.60, 98.10, 99.50),
new("Jan 22", 99.50, 101.16, 98.91, 100.70),
new("Jan 23", 100.70, 101.24, 97.36, 98.20),
new("Jan 24", 98.20, 98.63, 95.71, 96.40),
new("Jan 27", 96.40, 103.90, 94.10, 98.60),
new("Jan 28", 98.60, 99.03, 94.62, 95.70),
new("Jan 29", 95.70, 96.12, 92.34, 93.10),
new("Jan 30", 94.65, 96.30, 90.70, 94.80),
new("Jan 31", 94.80, 95.04, 91.63, 92.40),
new("Feb 03", 92.40, 98.80, 87.90, 95.60),
new("Feb 04", 95.60, 98.91, 95.18, 98.30),
new("Feb 05", 98.30, 98.76, 96.21, 96.90),
new("Feb 06", 93.20, 101.50, 92.60, 99.70),
new("Feb 07", 99.70, 103.18, 99.12, 102.50),
new("Feb 10", 105.80, 106.50, 98.10, 100.20),
new("Feb 11", 100.20, 100.63, 96.84, 97.60),
new("Feb 12", 99.02, 101.40, 95.70, 99.10),
new("Feb 13", 99.10, 102.74, 98.67, 101.80),
new("Feb 14", 101.80, 105.28, 101.31, 104.60),
new("Feb 17", 104.60, 105.13, 101.74, 102.70),
new("Feb 18", 102.70, 106.02, 102.18, 105.30),
new("Feb 19", 100.80, 109.40, 99.30, 107.90),
new("Feb 20", 107.90, 108.31, 104.38, 105.20),
new("Feb 21", 108.40, 109.10, 99.20, 102.60),
new("Feb 24", 102.60, 103.02, 99.61, 100.40),
new("Feb 25", 100.40, 101.18, 97.83, 98.70),
new("Feb 26", 98.70, 103.00, 91.10, 96.10),
new("Feb 27", 96.10, 99.06, 95.77, 98.40),
new("Feb 28", 98.40, 102.13, 98.02, 101.20),
new("Mar 03", 99.35, 106.10, 97.10, 99.30),
new("Mar 04", 99.30, 103.17, 98.85, 102.50),
new("Mar 05", 102.50, 106.24, 101.93, 105.60),
new("Mar 06", 105.60, 109.08, 105.14, 108.20),
new("Mar 07", 108.20, 108.74, 104.86, 106.30),
new("Mar 10", 101.90, 112.50, 101.20, 109.70),
new("Mar 11", 109.70, 113.28, 109.21, 112.40),
new("Mar 12", 113.80, 114.50, 106.40, 110.10),
new("Mar 13", 110.10, 110.72, 106.24, 107.60),
new("Mar 14", 107.60, 108.13, 103.48, 104.80),
new("Mar 17", 108.70, 109.40, 100.20, 102.90),
new("Mar 18", 102.90, 106.18, 102.37, 105.70),
new("Mar 19", 105.70, 109.27, 105.16, 108.60),
new("Mar 20", 106.85, 112.20, 104.10, 106.80),
new("Mar 21", 106.80, 110.83, 106.31, 110.20),
new("Mar 24", 110.20, 117.00, 107.00, 113.10),
new("Mar 25", 113.10, 113.58, 109.84, 111.40),
new("Mar 26", 111.40, 115.73, 110.96, 115.20)
];
```
## OHLC
Set `Kind` to `CandlestickStyle.Ohlc` to draw a tick for the open on the left and the close on the right instead of a body.
```razor
```
## Labels and format
`RisingLabel` and `FallingLabel` rename the directions, and `ValueFormat` formats the prices.
```razor
```
## Summary
Tooltips and the table view give the open, high, low and close of each period.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwCandlestickChart
A candlestick chart: for each period, a body between the opening and closing value and a wick reaching the high and the low. Set `Kind` to `Ohlc` for an OHLC chart.
| Parameter | Type | Description |
| --- | --- | --- |
| `Items` | `IReadOnlyList` | Gets or sets the periods to plot, in order. |
| `Kind` | `CandlestickStyle` | Gets or sets whether each period is drawn as a candle or as open and close ticks. |
| `RisingLabel` | `string?` | Gets or sets the legend label for a period that closed at or above its open. Defaults to the localized `Chart_Rising` text ("Rising"). |
| `FallingLabel` | `string?` | Gets or sets the legend label for a period that closed below its open. Defaults to the localized `Chart_Falling` text ("Falling"). |
| `LabelHeader` | `string?` | Gets or sets the heading of the period column in the table view. Defaults to the localized `Chart_Period` text ("Period"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwCategoricalScatterChart
> TwCategoricalScatterChart is a Blazor chart that places a dot where two categories meet and sizes it by a value.
Documentation page: https://twblazor.com/chart/categorical-scatter
## Basic usage
`TwCategoricalScatterChart` places a dot where a horizontal category meets a vertical one and sizes it by a value. Each `ChartCategoricalPoint` names its two categories, so you only list the combinations that exist.
```razor
```
```csharp
private readonly ChartCategoricalPoint[] _responses =
[
new("Service", "Positive", 48), new("Price", "Positive", 12), new("Quality", "Positive", 62),
new("Service", "Neutral", 15), new("Price", "Neutral", 20), new("Quality", "Neutral", 9),
new("Service", "Negative", 7), new("Price", "Negative", 34)
];
```
## Sparse combinations
The chart is most useful when many combinations are empty, where a heatmap would be mostly blank cells. Categories appear in the order they are first used, so list the points in the order you want the axes to read.
```razor
```
```csharp
private readonly ChartCategoricalPoint[] _incidents =
[
new("Payments", "Critical", 2), new("Search", "Critical", 1),
new("Payments", "High", 5), new("Accounts", "High", 3), new("Mobile", "High", 8),
new("Search", "Medium", 11), new("Mobile", "Medium", 14), new("Reports", "Medium", 4),
new("Payments", "Low", 9), new("Accounts", "Low", 17), new("Search", "Low", 6), new("Reports", "Low", 21)
];
```
## Named points
Give a point a `Label` to title its tooltip and add a label column to the table view.
```razor
```
```csharp
private readonly ChartCategoricalPoint[] _talks =
[
new("Monday", "Design", 180, "Design systems at scale"),
new("Monday", "Engineering", 420, "Keynote: ten years of Blazor"),
new("Tuesday", "Design", 95, "Color for everyone"),
new("Tuesday", "Engineering", 260, "Rendering without script"),
new("Tuesday", "Product", 140, "Roadmaps that survive"),
new("Wednesday", "Product", 210, "Pricing experiments")
];
```
## When to use
Use a categorical scatter plot when most combinations of the two categories are empty. The area of a dot, not its diameter, follows the value. For a full grid of values use [TwMatrixChart](https://twblazor.com/chart/matrix.md) or [TwHeatmapChart](https://twblazor.com/chart/heatmap.md).
## Summary
Tooltips and the table view give the two categories and the value of each point.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwCategoricalScatterChart
A categorical scatter plot: a dot where a horizontal category meets a vertical one, sized by its value, for showing how a measure varies across two sets of categories when most combinations are empty.
| Parameter | Type | Description |
| --- | --- | --- |
| `Points` | `IReadOnlyList` | Gets or sets the points to plot. |
| `XTitle` | `string` | Gets or sets the title of the horizontal axis. It also labels the horizontal category in tooltips and the table view. |
| `YTitle` | `string` | Gets or sets the title of the vertical axis. It also labels the vertical category in tooltips and the table view. |
| `ValueTitle` | `string?` | Gets or sets the label for a point's value in tooltips and the table view. Defaults to the localized `Chart_Value` text ("Value"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwChordDiagramChart
> TwChordDiagramChart is a Blazor chord diagram: nodes as arcs around a circle joined by ribbons as thick as the flow between them.
Documentation page: https://twblazor.com/chart/chord-diagram
## Basic usage
`TwChordDiagramChart` arranges `ChartGraphNode` values as arcs around a circle and draws a ribbon across it for every `ChartGraphLink`. An arc is as long as the total of its links and a ribbon is as thick as its link's value. Links refer to nodes by `Id`.
```razor
```
```csharp
private readonly ChartGraphNode[] _teams = [new("design", "Design"), new("eng", "Engineering"), new("sales", "Sales")];
private readonly ChartGraphLink[] _projects = [new("design", "eng", 8), new("eng", "sales", 5), new("sales", "design", 3)];
```
## Flows in both directions
Add a link each way to show a two-way flow. Each ribbon takes the color of the node it starts at, so the mix of colors arriving at an arc shows where its traffic comes from.
```razor
```
```csharp
private readonly ChartGraphNode[] _plans = [new("free", "Free"), new("team", "Team"), new("business", "Business"), new("enterprise", "Enterprise")];
private readonly ChartGraphLink[] _switches =
[
new("free", "team", 420), new("team", "free", 90),
new("team", "business", 260), new("business", "team", 70),
new("business", "enterprise", 110), new("enterprise", "business", 25),
new("free", "business", 60)
];
```
## Dominant links
Because thickness follows value, one heavy relationship stands out from many light ones at a glance.
```razor
```
```csharp
private readonly ChartGraphNode[] _regions =
[
new("eu", "Europe"), new("na", "North America"), new("as", "Asia"), new("sa", "South America"), new("af", "Africa")
];
private readonly ChartGraphLink[] _trade =
[
new("eu", "na", 620), new("as", "na", 540), new("as", "eu", 480),
new("na", "sa", 90), new("eu", "af", 70), new("as", "af", 55), new("sa", "eu", 40)
];
```
## When to use
Use a chord diagram to compare weighted flows among a handful of nodes. Nodes are named in the legend, in the colors of their arcs. Links that name a missing node, or join a node to itself, are left out.
## Summary
Tooltips and the table view give the source, target and value of each link. Tooltips also give the total of each node.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwChordDiagramChart
A chord diagram: nodes arranged as arcs around a circle, each as long as the total of its links, with a ribbon across the circle for every link, as thick as the link's value.
| Parameter | Type | Description |
| --- | --- | --- |
| `Nodes` | `IReadOnlyList` | Gets or sets the nodes. Each needs a unique `Id`; repeats are left out. |
| `Links` | `IReadOnlyList` | Gets or sets the links between nodes, by node identifier. Links that name a missing node, or join a node to itself, are left out. |
| `SourceHeader` | `string?` | Gets or sets the heading of the column naming where each link starts in the table view. Defaults to the localized `Chart_Source` text ("Source"). |
| `TargetHeader` | `string?` | Gets or sets the heading of the column naming where each link ends in the table view. Defaults to the localized `Chart_Destination` text ("Target"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels a link's value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwCircularTreemapChart
> TwCircularTreemapChart is a Blazor circle packing chart: a circle per leaf of a tree, sized by value and packed inside its parent's circle.
Documentation page: https://twblazor.com/chart/circular-treemap
## Basic usage
`TwCircularTreemapChart` takes a tree of `ChartHierarchyNode` values. Every leaf becomes a circle whose area follows its `Value`, packed inside a circle for its parent. Each top-level node has its own color and legend entry.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _folders =
[
new("Documents", Children: [new("Reports", 32), new("Notes", 18), new("Invoices", 9)]),
new("Media", Children: [new("Images", 45), new("Audio", 20), new("Video", 64)])
];
```
## Deeper trees
Nodes nest to any depth, and every level gets its own enclosing circle, so the grouping reads at a glance. A larger `Height` gives small circles room for their names.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _organisation =
[
new("Product", Children:
[
new("Engineering", Children: [new("Platform", 24), new("Web", 18), new("Mobile", 14), new("Data", 9)]),
new("Design", Children: [new("Research", 6), new("Interface", 11)])
]),
new("Commercial", Children:
[
new("Sales", Children: [new("Enterprise", 16), new("Mid-market", 12), new("Partners", 5)]),
new("Marketing", Children: [new("Brand", 7), new("Growth", 10)])
]),
new("Operations", Children: [new("Finance", 8), new("People", 6), new("Legal", 3)])
];
```
## A flat list
Without children every node is a leaf, and the chart becomes a packed bubble chart: one circle and one color per value.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _cities =
[
new("Tokyo", 37.2), new("Delhi", 33.8), new("Shanghai", 29.9), new("Dhaka", 23.9),
new("Cairo", 22.6), new("Lagos", 16.5), new("London", 9.7), new("Sydney", 5.2)
];
```
## When to use
Circles leave gaps, so sizes are harder to compare than on [TwConvexTreemapChart](https://twblazor.com/chart/convex-treemap.md); in return the nesting is easier to see. A name too long for its circle is cut short. Nodes with no value are left out.
## Summary
Tooltips and the table view give the path and the value of each leaf. Tooltips also give its share of the whole.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwCircularTreemapChart
A circular treemap (circle packing): a circle for every leaf of a tree, with an area that follows its value, packed inside a circle for its parent, so the grouping is visible as well as the sizes.
| Parameter | Type | Description |
| --- | --- | --- |
| `Roots` | `IReadOnlyList` | Gets or sets the top-level nodes of the tree. |
| `LabelHeader` | `string?` | Gets or sets the heading of the node column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwColumnChart
> TwColumnChart is a Blazor column chart that compares categories with vertical columns. Supports grouped, stacked, 100% stacked and diverging layouts.
Documentation page: https://twblazor.com/chart/column
## Basic usage
`TwColumnChart` draws vertical columns whose length shows the value of each category. Columns suit short category labels and a handful of categories, and read naturally for values over time. Pass the category labels as `Categories` and one or more `ChartSeries` as `Series`. For the other direction use [TwBarChart](https://twblazor.com/chart/bar.md); the parameters are identical.
```razor
```
```csharp
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.
```razor
```
## 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.
```razor
```
## 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.
```razor
```
## 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.
```razor
```
## 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.
```razor
```
```csharp
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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwColumnChart
A column chart: vertical bars whose height shows the value of each category. With several series it becomes a grouped, stacked or 100% stacked column chart, see `Stacking`.
| Parameter | Type | Description |
| --- | --- | --- |
| `Stacking` | `ChartStacking` | Gets or sets how multiple series share a category: side by side, stacked, or stacked to 100%. |
| `ShowValues` | `bool` | Gets or sets whether each bar is labelled with its value. Ignored when `Stacking` is on. |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwContourChart
> TwContourChart is a Blazor contour plot that joins the places where a measured surface has the same value, like height lines on a map.
Documentation page: https://twblazor.com/chart/contour
## Basic usage
`TwContourChart` draws contour lines over a surface estimated from scattered samples. Give each `ChartPoint` its position as `X` and `Y` and its measurement as `Size`. A stronger line marks a higher value, and each sample is drawn as a dot.
```razor
```
```csharp
private readonly ChartPointSeries[] _temperatures =
[
new("Sensors",
[
new(0, 0, Size: 17.5), new(4, 0, Size: 18.2), new(8, 0, Size: 19.1),
new(0, 3, Size: 18.4), new(4, 3, Size: 20.6), new(8, 3, Size: 22.3),
new(0, 6, Size: 19.0), new(4, 6, Size: 21.8), new(8, 6, Size: 24.5)
])
];
```
## Levels
`Levels` sets how many lines are drawn, from 2 to 10, spaced evenly between the lowest and highest measurement. More lines show the slope in more detail: where they bunch together the surface is steep.
```razor
```
## Two peaks
Closed rings mark a peak or a hollow. This survey has two hills with a saddle between them. Name the samples with `Label` to title their tooltips.
```razor
```
```csharp
// A 7 by 5 grid of readings that fall away from two transmitters.
private readonly ChartPointSeries[] _signal =
[
new("Transmitters", [new(2, 3, "North mast", 60), new(8, 1.5, "South mast", 52)]),
new("Survey", [.. Enumerable.Range(0, 35).Select(index =>
{
var (x, y) = (index % 7 * 1.6, index / 7 * 1.0);
var north = 60 / (1 + Math.Pow(x - 2, 2) + Math.Pow(y - 3, 2));
var south = 52 / (1 + Math.Pow(x - 8, 2) + Math.Pow(y - 1.5, 2));
return new ChartPoint(x, y, Size: Math.Round(north + south, 1));
})])
];
```
## When to use
Use a contour plot for a measurement that varies smoothly across two dimensions. The surface between samples is estimated, so the lines are a guide and the dots are the measurements. Points without a `Size` are left out, and at least three samples are needed.
## Summary
Tooltips and the table view give the position and the value of each sample.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwContourChart
A contour plot: lines joining the places where a measured surface has the same value, like the height lines on a map, drawn from samples taken at scattered positions.
| Parameter | Type | Description |
| --- | --- | --- |
| `Levels` | `int` | Gets or sets how many contour lines are drawn, from 2 to 10. |
| `ValueTitle` | `string?` | Gets or sets the label for a sample's measurement in tooltips and the table view. Defaults to the localized `Chart_Value` text ("Value"). |
| `Series` | `IReadOnlyList` | Gets or sets the series of points to summarise. Every series is combined into one cloud. |
| `XTitle` | `string` | Gets or sets the title of the horizontal axis. It also labels the X value in tooltips and the table view. |
| `YTitle` | `string` | Gets or sets the title of the vertical axis. It also labels the Y value in tooltips and the table view. |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwConvexTreemapChart
> TwConvexTreemapChart is a Blazor treemap for trees: cut-cornered tiles sized by value and grouped with the other leaves of their parent.
Documentation page: https://twblazor.com/chart/convex-treemap
## Basic usage
`TwConvexTreemapChart` takes a tree of `ChartHierarchyNode` values and fills the plot with a tile for every leaf, sized by its `Value`. The leaves of one parent sit together and share its color, with a gap around the group.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _budget =
[
new("Product", Children: [new("Research", 36), new("Design", 24), new("Engineering", 58)]),
new("Operations", Children: [new("Support", 22), new("Hosting", 18)])
];
```
## Many leaves
Tiles are laid out largest first and kept close to square, so a long tail of small values stays readable. Tiles with room show their name; every tile has a tooltip.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _bundle =
[
new("Framework", Children: [new("Runtime", 412), new("Router", 96), new("Forms", 74), new("Http", 38)]),
new("Interface", Children: [new("Components", 268), new("Icons", 142), new("Charts", 118), new("Theme", 44)]),
new("Application", Children: [new("Pages", 186), new("Services", 92), new("Models", 31), new("Resources", 27), new("Utilities", 12)])
];
```
## Three levels
Groups nest inside groups. Each level is inset a little further, and the tooltip and table view give a leaf's full path so two leaves with the same name stay distinct.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _sales =
[
new("Europe", Children:
[
new("United Kingdom", Children: [new("Hardware", 4.2), new("Software", 6.8), new("Services", 2.4)]),
new("Germany", Children: [new("Hardware", 3.1), new("Software", 4.4)]),
new("France", Children: [new("Hardware", 1.9), new("Software", 2.7)])
]),
new("Americas", Children:
[
new("United States", Children: [new("Hardware", 7.5), new("Software", 11.3), new("Services", 5.1)]),
new("Canada", Children: [new("Hardware", 1.4), new("Software", 2.2)])
]),
new("Asia Pacific", Children: [new("Japan", 5.6), new("Australia", 3.3), new("Singapore", 1.8)])
];
```
## When to use
Use a convex treemap to compare the leaves of a tree by size. Nodes with no value are left out. For a single flat list of values, [TwTreemapChart](https://twblazor.com/chart/treemap.md) does the same job without the grouping.
## Summary
Tooltips and the table view give the path and the value of each leaf. Tooltips also give its share of the whole.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwConvexTreemapChart
A convex treemap: the leaves of a tree drawn as tiles with cut corners that fill the plot, each with an area that follows its value and grouped with the other leaves of its parent.
| Parameter | Type | Description |
| --- | --- | --- |
| `Roots` | `IReadOnlyList` | Gets or sets the top-level nodes of the tree. |
| `LabelHeader` | `string?` | Gets or sets the heading of the node column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwDendrogramChart
> TwDendrogramChart is a Blazor dendrogram: a tree drawn from its root down to its leaves with a bracket joining every branch to its parent.
Documentation page: https://twblazor.com/chart/dendrogram
## Basic usage
`TwDendrogramChart` draws a tree of `ChartHierarchyNode` values from the root at the top to the leaves along the bottom. Leaves are named on the axis under the plot, and branches are named beside the point where they split.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _documents =
[
new("All documents", Children:
[
new("Research", Children: [new("Paper A", 1), new("Paper B", 1)]),
new("Guides", Children: [new("Guide A", 1), new("Guide B", 1)])
])
];
```
## Uneven depth
Leaves line up along the bottom whatever their depth, so a branch that splits again and again is easy to compare with one that ends early. This is the usual way to draw a classification.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _vertebrates =
[
new("Vertebrates", Children:
[
new("Fish", Children: [new("Sharks", 1), new("Salmon", 1)]),
new("Tetrapods", Children:
[
new("Amphibians", Children: [new("Frogs", 1), new("Newts", 1)]),
new("Amniotes", Children:
[
new("Mammals", Children: [new("Whales", 1), new("Bats", 1), new("Primates", 1)]),
new("Reptiles", Children: [new("Lizards", 1), new("Birds", 1)])
])
])
])
];
```
## Values
Give leaves a `Value` and every branch shows the total of the leaves beneath it in its tooltip and in the table view.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _buildSteps =
[
new("Build", Children:
[
new("Compile", Children: [new("Library", 42), new("Docs", 31), new("Tests", 18)]),
new("Verify", Children: [new("Unit", 64), new("Browser", 97)]),
new("Package", 12)
])
];
```
## Several roots
Pass more than one root to draw separate trees side by side.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _teams =
[
new("Asha", Children: [new("Ben", 1), new("Chloe", 1)]),
new("Dmitri", Children: [new("Elena", 1), new("Farid", 1), new("Grace", 1)])
];
```
## When to use
Use a dendrogram to show how items group into clusters, when the structure matters more than the sizes. To compare sizes use [TwSunburstChart](https://twblazor.com/chart/sunburst.md) or [TwConvexTreemapChart](https://twblazor.com/chart/convex-treemap.md).
## Summary
Tooltips and the table view give the path and the value of each node. The arrow keys visit the nodes from the root down, a branch before its children.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwDendrogramChart
A dendrogram: a tree drawn from its root at the top down to its leaves along the bottom, with every branch joined to its parent by a bracket, for showing how items group into clusters.
| Parameter | Type | Description |
| --- | --- | --- |
| `Roots` | `IReadOnlyList` | Gets or sets the top-level nodes of the tree. |
| `LabelHeader` | `string?` | Gets or sets the heading of the node column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwDensityPlotChart
> TwDensityPlotChart is a Blazor density plot that draws a smooth curve per group showing where its raw values concentrate.
Documentation page: https://twblazor.com/chart/density-plot
## Basic usage
`TwDensityPlotChart` takes groups of raw observations as `ChartSample` values and draws a smooth curve for each, tall where its values cluster. You pass the observations; the chart estimates the curve.
```razor
```
```csharp
private readonly ChartSample[] _checkout =
[
new("Checkout", [31, 34, 36, 38, 39, 41, 42, 42, 44, 45, 47, 48, 51, 55, 62, 74])
];
```
## Comparing groups
Several groups share one axis and one vertical scale, so a taller curve always means a tighter cluster. Each group gets a legend entry; click one to hide its curve and let the axis refit the rest.
```razor
```
```csharp
private readonly ChartSample[] _releases =
[
new("v1.8", [820, 860, 905, 930, 960, 990, 1010, 1040, 1080, 1150, 1230, 1400]),
new("v1.9", [640, 690, 720, 745, 760, 790, 805, 830, 870, 910, 980]),
new("v2.0", [410, 430, 445, 450, 462, 470, 478, 490, 505, 530, 560])
];
```
## Two peaks
A density plot shows shapes that a box plot hides. Here the same service has a fast cached path and a slow uncached one, which appear as two separate humps.
```razor
```
```csharp
private readonly ChartSample[] _latency =
[
new("Latency", [18, 20, 21, 22, 22, 23, 24, 25, 26, 28, 31, 140, 152, 158, 161, 165, 170, 174, 181, 190])
];
```
## When to use
Use a density plot to compare the shape of a few distributions. Curves run a little past the lowest and highest observation so they can fall back to zero, and there is no vertical axis because density has no unit a reader needs. For many groups use [TwRidgelinePlotChart](https://twblazor.com/chart/ridgeline.md).
## Summary
Tooltips and the table view give the count, minimum, median and maximum of each group.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwDensityPlotChart
A density plot: a smooth curve for each group of raw observations showing where its values concentrate, for comparing the shape of distributions on one axis.
| Parameter | Type | Description |
| --- | --- | --- |
| `Samples` | `IReadOnlyList` | Gets or sets the groups of raw observations to plot. |
| `LabelHeader` | `string?` | Gets or sets the heading of the group column in the table view. Defaults to the localized `Chart_Group` text ("Group"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwDotPlotChart
> TwDotPlotChart is a Blazor dot plot that compares series by position on a shared line per category. The scale does not need to start at zero.
Documentation page: https://twblazor.com/chart/dot-plot
## Basic usage
`TwDotPlotChart` places one dot per series on a shared line for each category, so values are compared by position rather than length. Because nothing is measured from a baseline, the scale can zoom in on the range the data occupies, which makes small differences visible.
```razor
```
```csharp
private readonly string[] _regions = ["North", "South", "East", "West"];
private readonly ChartSeries[] _yearly =
[
new("2024", [360, 290, 240, 330]),
new("2025", [420, 310, 275, 380])
];
```
## Vertical
Set `Vertical` to place the categories along the bottom with values running upwards.
```razor
```
## Related charts
To draw attention to the gap between the dots, use [TwDumbbellChart](https://twblazor.com/chart/dumbbell.md), which joins them with a bar. To show every raw observation in a group, use [TwStripPlotChart](https://twblazor.com/chart/strip-plot.md).
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwDotPlotChart
A dot plot: one dot per series on a shared line for each category, so values are compared by position. Unlike bars the scale does not have to start at zero, which suits values that sit in a narrow range.
| Parameter | Type | Description |
| --- | --- | --- |
| `Vertical` | `bool` | Gets or sets whether categories run left to right with values bottom to top, instead of the default rows with values left to right. |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwDumbbellChart
> TwDumbbellChart is a Blazor dumbbell chart: two dots per category joined by a bar, highlighting the gap between values such as before and after.
Documentation page: https://twblazor.com/chart/dumbbell
## Basic usage
`TwDumbbellChart` is a dot plot whose dots are joined by a bar. The bar makes the size of the gap the first thing the reader sees, which suits before and after, target and actual, or any two groups.
```razor
```
```csharp
private readonly string[] _regions = ["North", "South", "East", "West"];
private readonly ChartSeries[] _yearly =
[
new("2024", [360, 290, 240, 330]),
new("2025", [420, 310, 275, 380])
];
```
## Vertical
Set `Vertical` to place the categories along the bottom.
```razor
```
## More than two series
The bar always spans from the lowest to the highest value in the category, so a third series sits somewhere along it.
```razor
```
```csharp
private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
private readonly ChartSeries[] _visitors =
[
new("Organic", [42, 48, 55, 61, 58, 70]),
new("Paid", [30, 34, 31, 45, 52, 49]),
new("Referral", [12, 15, 21, 19, 26, 33])
];
```
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwDumbbellChart
A dumbbell chart: a dot plot whose dots are joined by a bar, drawing the eye to the gap between two (or more) values for each category, such as before and after.
| Parameter | Type | Description |
| --- | --- | --- |
| `Vertical` | `bool` | Gets or sets whether categories run left to right with values bottom to top, instead of the default rows with values left to right. |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwEulerDiagramChart
> TwEulerDiagramChart is a Blazor Euler diagram: sets as circles sized by their members, overlapping only where they share some.
Documentation page: https://twblazor.com/chart/euler-diagram
## Basic usage
`TwEulerDiagramChart` draws each `ChartSet` as a circle whose area follows its size. Two circles overlap only when a `ChartSetIntersection` says they share elements, and by an area that follows how many.
```razor
```
```csharp
private readonly ChartSet[] _groups = [new("Design", 42), new("Research", 35)];
private readonly ChartSetIntersection[] _sharedMembers = [new("Design", "Research", 18)];
```
## Separate sets
Sets with no intersection are drawn apart. Here two products share customers and a third has none in common with either.
```razor
```
```csharp
private readonly ChartSet[] _products = [new("Accounts", 64), new("Payroll", 38), new("Rostering", 12)];
private readonly ChartSetIntersection[] _sharedCustomers = [new("Accounts", "Payroll", 22)];
```
## A set inside another
When a set shares all of its elements with a larger one, it is drawn inside it. Every premium subscriber here is also a registered user.
```razor
```
```csharp
private readonly ChartSet[] _accounts = [new("Registered", 90), new("Premium", 18)];
private readonly ChartSetIntersection[] _accountOverlap = [new("Registered", "Premium", 18)];
```
## Three overlapping sets
With three sets the circles are placed so each pair overlaps as closely as circles allow to the number given. Read exact figures from the labels, tooltips and table view.
```razor
```
```csharp
private readonly ChartSet[] _languages = [new("English", 120), new("Spanish", 55), new("French", 30)];
private readonly ChartSetIntersection[] _bilingual =
[
new("English", "Spanish", 32),
new("English", "French", 18),
new("Spanish", "French", 6)
];
```
## When to use
Use an Euler diagram when the sizes of the sets matter. Up to three sets are drawn, and sets with no size are left out. To show every possible overlap with equal circles, use [TwVennDiagramChart](https://twblazor.com/chart/venn-diagram.md).
## Summary
Tooltips and the table view give the size of each set and of each overlap.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwEulerDiagramChart
An Euler diagram: up to three sets drawn as circles whose areas follow their sizes, overlapping only where they share elements and by an area that follows how many.
| Parameter | Type | Description |
| --- | --- | --- |
| `Sets` | `IReadOnlyList` | Gets or sets the sets to draw. Up to three are shown; sets with no size are left out. |
| `Intersections` | `IReadOnlyList` | Gets or sets how many elements each pair of sets shares. Each is named by the labels of its two sets. |
| `LabelHeader` | `string?` | Gets or sets the heading of the set column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the size column in the table view. It also labels a set's size in tooltips. Defaults to the localized `Chart_Size` text ("Size"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwFlowchart
> TwFlowchart is a Blazor flowchart: the steps of a process as boxes in columns, with an arrow for every link from one step to the next.
Documentation page: https://twblazor.com/chart/flowchart
## Basic usage
`TwFlowchart` draws each `ChartGraphNode` as a box and each `ChartGraphLink` as an arrow. Steps are set out in columns from left to right, each to the right of every step that leads to it. Links refer to nodes by `Id`.
```razor
```
```csharp
private readonly ChartGraphNode[] _reviewSteps = [new("submit", "Submit"), new("review", "Review"), new("publish", "Publish")];
private readonly ChartGraphLink[] _reviewLinks = [new("submit", "review"), new("review", "publish")];
```
## Branches
Steps reached from the same step share a column and are stacked in the order given, so a decision fans out and its branches join again further on.
```razor
```
```csharp
private readonly ChartGraphNode[] _ticketSteps =
[
new("open", "Opened"), new("triage", "Triage"),
new("answer", "Answer"), new("fix", "Fix"), new("refund", "Refund"),
new("close", "Closed")
];
private readonly ChartGraphLink[] _ticketLinks =
[
new("open", "triage"),
new("triage", "answer"), new("triage", "fix"), new("triage", "refund"),
new("answer", "close"), new("fix", "close"), new("refund", "close")
];
```
## Parallel work
A pipeline that runs several jobs at once shows as a column of boxes fed by one step and feeding the next.
```razor
```
```csharp
private readonly ChartGraphNode[] _pipelineSteps =
[
new("commit", "Commit"), new("build", "Build"),
new("unit", "Unit tests"), new("browser", "Browser tests"), new("a11y", "Accessibility"), new("lint", "Lint"),
new("package", "Package"), new("deploy", "Deploy")
];
private readonly ChartGraphLink[] _pipelineLinks =
[
new("commit", "build"),
new("build", "unit"), new("build", "browser"), new("build", "a11y"), new("build", "lint"),
new("unit", "package"), new("browser", "package"), new("a11y", "package"), new("lint", "package"),
new("package", "deploy")
];
```
## Setting the column
Set a node's `Stage` to move it further right than its links alone would place it. Here the manual check is held back to line up with the final column of automatic checks.
```razor
```
```csharp
private readonly ChartGraphNode[] _orderSteps =
[
new("order", "Order"), new("stock", "Stock"), new("fraud", "Fraud"),
new("manual", "Manual check", Stage: 2), new("ship", "Ship")
];
private readonly ChartGraphLink[] _orderLinks =
[
new("order", "stock"), new("stock", "fraud"), new("order", "manual"), new("fraud", "ship"), new("manual", "ship")
];
```
## When to use
Use a flowchart for the steps of a process. A name too long for its box is cut short; the tooltip has it in full. Link values are not shown: to show how much flows along each link, use [TwSankeyChart](https://twblazor.com/chart/sankey.md).
## Summary
Tooltips and the table view give the source and target of each link. The arrow keys move through the steps in the order given.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwFlowchart
A flowchart: the steps of a process drawn as boxes in columns from left to right, with an arrow for every link from one step to the next.
| Parameter | Type | Description |
| --- | --- | --- |
| `Nodes` | `IReadOnlyList` | Gets or sets the nodes. Each needs a unique `Id`; repeats are left out. |
| `Links` | `IReadOnlyList` | Gets or sets the links between nodes, by node identifier. Links that name a missing node, or join a node to itself, are left out. |
| `SourceHeader` | `string?` | Gets or sets the heading of the column naming where each link starts in the table view. Defaults to the localized `Chart_Source` text ("Source"). |
| `TargetHeader` | `string?` | Gets or sets the heading of the column naming where each link ends in the table view. Defaults to the localized `Chart_Destination` text ("Target"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels a link's value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwFunnelChart
> TwFunnelChart is a Blazor funnel chart showing how much remains at each stage of a process. Invert it to draw a pyramid chart.
Documentation page: https://twblazor.com/chart/funnel
## Basic usage
`TwFunnelChart` stacks the stages of a process, each as wide as its value, so the drop between stages is visible. Tooltips give each stage as a share of the first. The stages are an ordered sequence, so they share one hue that fades from first to last.
```razor
```
```csharp
private readonly ChartValue[] _funnel =
[
new("Visited", 12000),
new("Added to basket", 5400),
new("Started checkout", 3100),
new("Paid", 2200)
];
```
## Pyramid
Set `Inverted` to draw the stages from the bottom up, which turns the funnel into a pyramid.
```razor
```
```csharp
private readonly ChartValue[] _tiers =
[
new("Self service", 900),
new("Front line", 520),
new("Specialists", 210),
new("Engineering", 60)
];
```
## Labels
`ShareLabel` renames the share of the first stage in tooltips.
```razor
```
## Summary
Tooltips and the table view give the value of each stage. Tooltips also give its share of the first stage.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwFunnelChart
A funnel chart: stacked stages whose width shows how much remains at each step of a process, such as a sales pipeline. Set `Inverted` to draw it as a pyramid.
| Parameter | Type | Description |
| --- | --- | --- |
| `Inverted` | `bool` | Gets or sets whether the stages are drawn bottom to top, turning the funnel into a pyramid. |
| `ShareLabel` | `string?` | Gets or sets the label for a stage's share of the first stage in tooltips. Defaults to the localized `Chart_OfFirstStage` text ("Of first stage"). |
| `Data` | `IReadOnlyList` | Gets or sets the values to plot. |
| `LabelHeader` | `string?` | Gets or sets the heading of the label column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `OtherLabel` | `string?` | Gets or sets the label of the slice that collects the smallest values once there are more values than colors. Defaults to the localized `Chart_Other` text ("Other"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwGanttChart
> TwGanttChart is a Blazor Gantt chart: a horizontal bar per task from its start date to its end date, showing a schedule and overlaps.
Documentation page: https://twblazor.com/chart/gantt
## Basic usage
`TwGanttChart` draws a bar per `ChartTask` from its start date to its end date, in the order given, so the schedule and any overlaps are visible.
```razor
```
```csharp
private readonly ChartTask[] _tasks =
[
new("Research", new DateTime(2026, 1, 5, 0, 0, 0, DateTimeKind.Local), new DateTime(2026, 1, 23, 0, 0, 0, DateTimeKind.Local)),
new("Design", new DateTime(2026, 1, 19, 0, 0, 0, DateTimeKind.Local), new DateTime(2026, 2, 13, 0, 0, 0, DateTimeKind.Local)),
new("Build", new DateTime(2026, 2, 9, 0, 0, 0, DateTimeKind.Local), new DateTime(2026, 3, 20, 0, 0, 0, DateTimeKind.Local)),
new("Test", new DateTime(2026, 3, 9, 0, 0, 0, DateTimeKind.Local), new DateTime(2026, 3, 31, 0, 0, 0, DateTimeKind.Local))
];
```
## Date format
`DateFormat` takes any .NET date format string and applies to the axis, tooltips and table view.
```razor
```
## Labels
`StartLabel`, `EndLabel` and `LabelHeader` rename the values in tooltips and the table view.
```razor
```
## Summary
Tooltips and the table view give the start and end of each task.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwGanttChart
A Gantt chart: a horizontal bar per task from its start date to its end date, showing a schedule and where tasks overlap.
| Parameter | Type | Description |
| --- | --- | --- |
| `Tasks` | `IReadOnlyList` | Gets or sets the tasks to plot, in the order they should be listed. |
| `DateFormat` | `string` | Gets or sets the .NET date format string used on the axis, tooltips and table view. |
| `LabelHeader` | `string?` | Gets or sets the heading of the task column in the table view. Defaults to the localized `Chart_Task` text ("Task"). |
| `StartLabel` | `string?` | Gets or sets the label for a task's start date. Defaults to the localized `Chart_Start` text ("Start"). |
| `EndLabel` | `string?` | Gets or sets the label for a task's end date. Defaults to the localized `Chart_End` text ("End"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwGaugeChart
> TwGaugeChart is a Blazor circular gauge: an arc filled in proportion to one value between a minimum and a maximum.
Documentation page: https://twblazor.com/chart/gauge
## Basic usage
`TwGaugeChart` fills an arc in proportion to a single `Value` and prints it in the middle. `Label` says what it measures.
```razor
```
## Range
The arc runs from `Min` (0 by default) to `Max` (100 by default). A value outside the range fills or empties the arc but is still printed as given.
```razor
```
## Size and format
`Height` sets how large the gauge may grow and `ValueFormat` formats the figure.
```razor
```
## Summary
Tooltips and the table view give the value of the gauge and the range it is measured against.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwGaugeChart
A circular gauge: an arc filled in proportion to a single value between a minimum and a maximum, with the value shown in the middle.
| Parameter | Type | Description |
| --- | --- | --- |
| `Value` | `double` | Gets or sets the value the gauge shows. |
| `Min` | `double` | Gets or sets the value at the start of the arc. |
| `Max` | `double` | Gets or sets the value at the end of the arc. |
| `Label` | `string?` | Gets or sets what the value measures, shown under it. Defaults to the localized `Chart_Value` text ("Value"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwHeatmapChart
> TwHeatmapChart is a Blazor heatmap: a grid of cells whose color intensity shows the value where a row and a column meet.
Documentation page: https://twblazor.com/chart/heatmap
## Basic usage
`TwHeatmapChart` lays each series out as a row and each category as a column, and shades the cell where they meet by its value. Intensity uses a single hue, so darker always means more.
```razor
```
```csharp
private readonly string[] _days = ["Mon", "Tue", "Wed", "Thu", "Fri"];
private readonly ChartSeries[] _shifts =
[
new("Morning", [34, 28, 31, 25, 40]),
new("Afternoon", [52, 47, 58, 49, 61]),
new("Evening", [18, 22, 15, 27, 33])
];
```
## Value labels
Set `ShowValues` to print each value on its cell. The text switches between dark and light ink to stay readable on any shade.
```razor
```
## Labels
`ValueLabel` names the value in tooltips and `CategoryHeader` names the first column of the table view.
```razor
```
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwHeatmapChart
A heatmap: a grid of cells whose color intensity shows the value where a series (row) meets a category (column).
| Parameter | Type | Description |
| --- | --- | --- |
| `ShowValues` | `bool` | Gets or sets whether each cell is labelled with its value. |
| `ValueLabel` | `string?` | Gets or sets the label for a cell's value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwHexbinChart
> TwHexbinChart is a Blazor hexbin chart that tiles the plot with hexagons shaded by how many points fall in each, for scatter data too dense to read.
Documentation page: https://twblazor.com/chart/hexbin
## Basic usage
`TwHexbinChart` takes the same `ChartPointSeries` as a scatter plot, tiles the plot with hexagons and shades each by how many points fall inside it. Use it when there are so many points that dots would pile into a blob.
```razor
```
```csharp
// A repeatable cloud of 400 sessions: longer sessions view more pages, with some scatter.
private readonly ChartPointSeries[] _sessions =
[
new("Sessions", [.. Enumerable.Range(0, 400).Select(index =>
{
var minutes = 2 + index % 37 * 0.6 + Math.Sin(index * 1.7) * 3;
var pages = 1 + minutes * 0.45 + Math.Cos(index * 2.3) * 2.5;
return new ChartPoint(Math.Max(0.5, minutes), Math.Max(1, pages));
})])
];
```
## Bin size
`BinWidth` is the width of a hexagon as a percentage of the plot's width, from 4 to 25. Smaller hexagons show finer detail but need more points to fill; larger ones smooth out the noise.
```razor
```
## Several series
Every series is combined into one cloud before counting, so you can pass data in whatever groups you hold it in. Here two clusters of readings show as two dark patches.
```razor
```
```csharp
private readonly ChartPointSeries[] _readings =
[
new("Greenhouse", [.. Enumerable.Range(0, 180).Select(index => new ChartPoint(27 + Math.Sin(index * 0.9) * 3, 72 + Math.Cos(index * 1.3) * 8))]),
new("Warehouse", [.. Enumerable.Range(0, 180).Select(index => new ChartPoint(16 + Math.Sin(index * 1.1) * 4, 41 + Math.Cos(index * 0.7) * 6))])
];
```
## When to use
Use a hexbin chart when a scatter plot has too many points to tell apart. Shading uses a single hue, so darker always means more points, and hexagons with no points are left out. For fewer points use [TwScatterChart](https://twblazor.com/chart/scatter.md).
## Summary
Tooltips and the table view give the average position and the count of the points in each hexagon.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwHexbinChart
A hexbin chart: the plot is tiled with hexagons and each is shaded by how many points fall inside it, for showing where a scatter plot too dense to read is most crowded.
| Parameter | Type | Description |
| --- | --- | --- |
| `BinWidth` | `double` | Gets or sets the width of a hexagon as a percentage of the plot's width, from 4 to 25. |
| `CountLabel` | `string?` | Gets or sets the label for a hexagon's count in tooltips and the table view. Defaults to the localized `Chart_Count` text ("Count"). |
| `Series` | `IReadOnlyList` | Gets or sets the series of points to summarise. Every series is combined into one cloud. |
| `XTitle` | `string` | Gets or sets the title of the horizontal axis. It also labels the X value in tooltips and the table view. |
| `YTitle` | `string` | Gets or sets the title of the vertical axis. It also labels the Y value in tooltips and the table view. |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwHistogramChart
> TwHistogramChart is a Blazor histogram that groups raw values into equal-width bins to reveal the shape of a distribution.
Documentation page: https://twblazor.com/chart/histogram
## Basic usage
`TwHistogramChart` takes raw `Values`, groups them into equal-width bins and draws a column per bin showing how many values fall in it. You pass the observations; the chart does the counting.
```razor
```
```csharp
private readonly double[] _responseTimes =
[
112, 120, 131, 135, 138, 142, 144, 149, 151, 153, 156, 158, 160, 163, 167,
170, 172, 176, 181, 185, 190, 196, 204, 215, 228, 240, 262, 290
];
```
## Bin count
The number of bins follows Sturges' rule unless you set `BinCount`. Fewer bins show the overall shape; more show detail.
```razor
```
## Labels
`RangeLabel` and `CountLabel` name the two columns of the table view, and `CountLabel` also titles the axis.
```razor
```
## Summary
Tooltips and the table view give the range and count of each bin.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwHistogramChart
A histogram: raw values grouped into equal-width bins, with a column per bin showing how many values fall in it, revealing the shape of a distribution.
| Parameter | Type | Description |
| --- | --- | --- |
| `Values` | `IReadOnlyList` | Gets or sets the raw values to group. |
| `BinCount` | `int?` | Gets or sets how many bins to group the values into. |
| `RangeLabel` | `string?` | Gets or sets the label for a bin's range in tooltips and the table view. Defaults to the localized `Chart_Range` text ("Range"). |
| `CountLabel` | `string?` | Gets or sets the label for a bin's count in tooltips and the table view. Defaults to the localized `Chart_Count` text ("Count"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwHorizonChart
> TwHorizonChart is a Blazor horizon chart that folds each series into a compact row of layered bands, fitting many series into little height.
Documentation page: https://twblazor.com/chart/horizon
## Basic usage
`TwHorizonChart` gives each series its own short row. Values are cut into bands and the bands are layered, so a strong value shows as a darker color instead of a taller mark. Series are named on the axis.
```razor
```
```csharp
private readonly string[] _hours = ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"];
private readonly ChartSeries[] _services =
[
new("API", [12, 8, 6, 14, 38, 52, 47, 55, 49, 36, 24, 15]),
new("Web", [9, 5, 4, 11, 26, 31, 35, 33, 30, 28, 21, 12]),
new("Search", [3, 2, 1, 4, 12, 19, 22, 18, 15, 11, 8, 4]),
new("Reports", [1, 1, 22, 18, 3, 2, 2, 3, 2, 1, 1, 1])
];
```
## Bands
`BandCount` sets how many bands the values are cut into, from 1 to 6. More bands show finer differences in the same height but are harder to tell apart; three is a good default.
```razor
```
## Above and below zero
Negative values are drawn in the color for an unfavourable change, growing from the same baseline, so a row shows at a glance when a series was up and when it was down.
```razor
```
```csharp
private readonly string[] _weeks = ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"];
private readonly ChartSeries[] _regions =
[
new("North", [2.1, 3.4, 1.2, -0.8, -2.6, -1.1, 1.9, 4.2]),
new("South", [-1.4, -2.2, -3.1, -1.9, 0.6, 2.4, 3.3, 2.8]),
new("West", [0.4, 0.9, 1.6, 2.2, 2.9, 1.4, -0.3, -1.7])
];
```
## When to use
Use a horizon chart to fit many series into little height. Every row shares one scale, so the same darkness means the same magnitude in each. For a few series, [TwLineChart](https://twblazor.com/chart/line.md) is easier to read.
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwHorizonChart
A horizon chart: one compact row per series in which the values are cut into bands and layered, so a strong value shows as a darker color instead of a taller mark. It fits many series into little height.
| Parameter | Type | Description |
| --- | --- | --- |
| `BandCount` | `int` | Gets or sets how many bands the values are cut into, from 1 to 6. |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwIconChart
> TwIconChart is a Blazor icon chart and pictogram: values shown as rows of repeated icons, or as one icon sized by each value.
Documentation page: https://twblazor.com/chart/icon
## Basic usage
`TwIconChart` draws values with any `Icon` from the library. By default each value becomes a row of repeated icons, a pictogram, and the legend states what one icon stands for.
```razor
```
```csharp
private readonly ChartValue[] _offices =
[
new("London", 48),
new("Leeds", 22),
new("Bristol", 31)
];
```
## Unit value
A round amount is chosen so the largest value uses about ten icons. Set `UnitValue` to decide what one icon is worth.
```razor
```
## Sized icons
Set `Mode` to `IconChartMode.Size` to draw one icon per value, with its area following the value.
```razor
```
## Accessibility
The icons are decorative and hidden from assistive technology. The values are stated by the data points, tooltips and table view.
## Summary
Tooltips and the table view give the value of 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwIconChart
An icon chart: values shown with icons, either as a row of repeated icons per value (a pictogram) or as one icon per value sized by it. Icons make a chart quick to relate to, at the cost of precision.
| Parameter | Type | Description |
| --- | --- | --- |
| `Icon` | `Icon` | Gets or sets the icon to draw. |
| `Mode` | `IconChartMode` | Gets or sets whether values are shown by repeating the icon or by scaling it. |
| `UnitValue` | `double?` | Gets or sets how much one icon stands for in `Count` mode. |
| `Data` | `IReadOnlyList` | Gets or sets the values to plot. |
| `LabelHeader` | `string?` | Gets or sets the heading of the label column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `OtherLabel` | `string?` | Gets or sets the label of the slice that collects the smallest values once there are more values than colors. Defaults to the localized `Chart_Other` text ("Other"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwLineChart
> TwLineChart is a Blazor line chart for trends. Supports straight, smooth (spline) and step lines, markers and gaps for missing values.
Documentation page: https://twblazor.com/chart/line
## Basic usage
`TwLineChart` joins values in category order to show a trend. Hover or focus anywhere in a category and one tooltip lists every series at that point, so the pointer never has to land on a line.
```razor
```
```csharp
private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
private readonly ChartSeries[] _visitors =
[
new("Organic", [42, 48, 55, 61, 58, 70]),
new("Paid", [30, 34, 31, 45, 52, 49]),
new("Referral", [12, 15, 21, 19, 26, 33])
];
```
## Spline
Set `Curve` to `ChartCurve.Smooth` for a smooth curve through the points. The curve never overshoots the data, so it cannot suggest a peak that is not there.
```razor
```
## Step line
`ChartCurve.Step` holds each value until the next one, which suits values that change at discrete moments such as a price or a stock level.
```razor
```
```csharp
private readonly ChartSeries[] _price = [new("Price", [20, 20, 25, 25, 25, 30])];
```
## Markers
A dot is drawn at each point when there are twelve categories or fewer. Set `ShowMarkers` to force them on or off.
```razor
```
## Missing values
A `null` value breaks the line instead of dropping to zero, so a gap in the data looks like a gap.
```razor
```
```csharp
private readonly ChartSeries[] _readings = [new("Temperature", [18, 21, null, null, 24, 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwLineChart
A line chart: values joined in category order to show a trend. Set `Curve` for a spline or step line chart.
| Parameter | Type | Description |
| --- | --- | --- |
| `Curve` | `ChartCurve` | Gets or sets how points are joined: straight (line), smooth (spline) or stepped (step line). |
| `ShowMarkers` | `bool?` | Gets or sets whether a dot is drawn at every point. |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# 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.
Documentation page: https://twblazor.com/chart/lollipop
## 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.
```razor
```
```csharp
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.
```razor
```
## Several series
With more than one series, each category shows a lollipop per series side by side.
```razor
```
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwLollipopChart
A lollipop chart: a thin stem ending in a dot for each value. It reads like a bar chart with less ink, which helps when there are many categories with similar values.
| Parameter | Type | Description |
| --- | --- | --- |
| `Horizontal` | `bool` | Gets or sets whether the stems run left to right with categories listed top to bottom. |
| `ShowValues` | `bool` | Gets or sets whether each dot is labelled with its value. |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwMarimekkoChart
> TwMarimekkoChart is a Blazor Marimekko chart: columns whose widths show each category's total and whose segments show each series' share of it.
Documentation page: https://twblazor.com/chart/marimekko
## Basic usage
`TwMarimekkoChart` takes the same `Categories` and `Series` as a column chart. Each column is as wide as its category's total and is split into segments by each series' share, so the area of a segment is its value.
```razor
```
```csharp
private readonly string[] _regions = ["North", "South", "West"];
private readonly ChartSeries[] _products =
[
new("Core", [50, 30, 20]),
new("Plus", [25, 40, 35]),
new("Pro", [15, 50, 10])
];
```
## A market map
The classic use is a market map: segments of a market across the bottom, sized by how big they are, and competitors up the side. A large block is a big prize; a tall segment in a narrow column is a strong position in a small market.
```razor
```
```csharp
private readonly string[] _industries = ["Finance", "Retail", "Healthcare", "Media", "Public sector"];
private readonly ChartSeries[] _providers =
[
new("Northwind", [420, 180, 150, 60, 90]),
new("Contoso", [260, 240, 90, 110, 40]),
new("Fabrikam", [140, 120, 160, 30, 70]),
new("Others", [80, 60, 50, 40, 20])
];
```
## Uneven categories
A column too narrow for its name loses the label under it but keeps its tooltip and its row in the table view. Segments with room show their share.
```razor
```
```csharp
private readonly string[] _channels = ["Email", "Chat", "Phone", "Post"];
private readonly ChartSeries[] _outcomes =
[
new("Solved first time", [640, 410, 95, 4]),
new("Solved later", [280, 120, 60, 9]),
new("Escalated", [80, 30, 45, 7])
];
```
## When to use
Use a Marimekko chart when both the size of each category and its make-up matter. Missing and negative values count as zero. When the categories are similar in size, a 100% stacked [TwColumnChart](https://twblazor.com/chart/column.md) is easier to read.
## Summary
Tooltips and the table view give the value of every series for each category. Tooltips also give the total of each category and its share of the whole.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwMarimekkoChart
A Marimekko chart: a column for each category whose width shows the category's total, split into segments showing each series' share of it, so both the size of every category and its make-up are visible at once.
| Parameter | Type | Description |
| --- | --- | --- |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwMatrixChart
> TwMatrixChart is a Blazor matrix chart: a grid with a dot sized by value where a row and a column meet, for two categorical dimensions.
Documentation page: https://twblazor.com/chart/matrix
## Basic usage
`TwMatrixChart` lays each series out as a row and each category as a column, and draws a dot where they meet, sized by the value. The area of the dot, not its width, follows the value.
```razor
```
```csharp
private readonly string[] _days = ["Mon", "Tue", "Wed", "Thu", "Fri"];
private readonly ChartSeries[] _shifts =
[
new("Morning", [34, 28, 31, 25, 40]),
new("Afternoon", [52, 47, 58, 49, 61]),
new("Evening", [18, 22, 15, 27, 33])
];
```
## Labels
`ValueLabel` names the value in tooltips and `CategoryHeader` names the first column of the table view.
```razor
```
## When to use
Dot sizes are harder to compare than shades when values are close together. For a dense grid, or to print the values, use [TwHeatmapChart](https://twblazor.com/chart/heatmap.md).
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwMatrixChart
A matrix chart: a grid with a dot where a series (row) meets a category (column), sized by the value, for spotting patterns across two categorical dimensions.
| Parameter | Type | Description |
| --- | --- | --- |
| `ValueLabel` | `string?` | Gets or sets the label for a cell's value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwNetworkDiagramChart
> TwNetworkDiagramChart is a Blazor network diagram that arranges linked nodes close together and unrelated ones apart.
Documentation page: https://twblazor.com/chart/network-diagram
## Basic usage
`TwNetworkDiagramChart` draws each `ChartGraphNode` as a named dot and each `ChartGraphLink` as a line. You give no positions: linked nodes pull together and all nodes push apart until the layout settles. Links refer to nodes by `Id`.
```razor
```
```csharp
private readonly ChartGraphNode[] _services = [new("ui", "UI"), new("api", "API"), new("auth", "Auth"), new("db", "Database"), new("cache", "Cache")];
private readonly ChartGraphLink[] _dependencies =
[
new("ui", "api"), new("ui", "auth"), new("api", "auth"), new("api", "db"), new("api", "cache")
];
```
## Hubs and clusters
The layout brings structure out of a plain list of links. Here two tightly linked groups separate, joined through the one node that belongs to both.
```razor
```
```csharp
private readonly ChartGraphNode[] _people =
[
new("ana", "Ana"), new("bo", "Bo"), new("cy", "Cy"), new("di", "Di"), new("eli", "Eli"),
new("fay", "Fay"), new("gus", "Gus"), new("hal", "Hal"), new("ivy", "Ivy")
];
private readonly ChartGraphLink[] _collaborations =
[
new("ana", "bo", 3), new("ana", "cy", 2), new("bo", "cy", 4), new("bo", "di", 1), new("cy", "di", 2),
new("eli", "di", 2),
new("eli", "fay", 3), new("eli", "gus", 1), new("fay", "gus", 2), new("gus", "hal", 4), new("fay", "hal", 1), new("hal", "ivy", 2)
];
```
## A star
A single hub with many spokes settles into a star, and nodes with no links drift to the edge.
```razor
```
```csharp
private readonly ChartGraphNode[] _devices =
[
new("switch", "Switch"), new("router", "Router"), new("printer", "Printer"), new("nas", "Storage"),
new("desk1", "Desk 1"), new("desk2", "Desk 2"), new("desk3", "Desk 3"), new("spare", "Spare laptop")
];
private readonly ChartGraphLink[] _cables =
[
new("switch", "router"), new("switch", "printer"), new("switch", "nas"),
new("switch", "desk1"), new("switch", "desk2"), new("switch", "desk3")
];
```
## When to use
Use a network diagram to show which nodes are connected. Only closeness carries meaning, not left, right, up or down, and the arrangement is the same every time for the same data. Links that name a missing node, or join a node to itself, are left out.
## Summary
Tooltips and the table view give the source, target and value of each link.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwNetworkDiagramChart
A network diagram: nodes drawn as dots and joined by a line for every link, arranged so that linked nodes sit close together and unrelated ones drift apart.
| Parameter | Type | Description |
| --- | --- | --- |
| `Nodes` | `IReadOnlyList` | Gets or sets the nodes. Each needs a unique `Id`; repeats are left out. |
| `Links` | `IReadOnlyList` | Gets or sets the links between nodes, by node identifier. Links that name a missing node, or join a node to itself, are left out. |
| `SourceHeader` | `string?` | Gets or sets the heading of the column naming where each link starts in the table view. Defaults to the localized `Chart_Source` text ("Source"). |
| `TargetHeader` | `string?` | Gets or sets the heading of the column naming where each link ends in the table view. Defaults to the localized `Chart_Destination` text ("Target"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels a link's value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwNightingaleChart
> TwNightingaleChart is a Blazor Nightingale (rose) chart: equal-angle wedges whose radius shows each value, suited to cyclical data.
Documentation page: https://twblazor.com/chart/nightingale
## Basic usage
`TwNightingaleChart` gives every value a wedge of the same angle and varies the radius. The area of each wedge is proportional to the value, so large values are not exaggerated.
```razor
```
```csharp
private readonly ChartValue[] _sources =
[
new("Search", 430),
new("Direct", 260),
new("Social", 170),
new("Email", 90),
new("Referral", 50)
];
```
## Cyclical data
The form suits values that follow a cycle, such as days of the week, where the last value sits beside the first.
```razor
```
```csharp
private readonly ChartValue[] _orders =
[
new("Mon", 120), new("Tue", 135), new("Wed", 150), new("Thu", 170),
new("Fri", 240), new("Sat", 310), new("Sun", 190)
];
```
## Many values
As on a pie chart, past eight values the smallest are folded into one wedge named by `OtherLabel`.
## Summary
Tooltips and the table view give the value of each wedge.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwNightingaleChart
A Nightingale (rose) chart: equal-angle wedges whose radius shows each value, for comparing values that follow a cycle such as months.
| Parameter | Type | Description |
| --- | --- | --- |
| `Data` | `IReadOnlyList` | Gets or sets the values to plot. |
| `LabelHeader` | `string?` | Gets or sets the heading of the label column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `OtherLabel` | `string?` | Gets or sets the label of the slice that collects the smallest values once there are more values than colors. Defaults to the localized `Chart_Other` text ("Other"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwParallelCoordinatesChart
> TwParallelCoordinatesChart is a Blazor parallel coordinates chart: one axis per variable and a line per item, each axis on its own scale.
Documentation page: https://twblazor.com/chart/parallel-coordinates
## Basic usage
`TwParallelCoordinatesChart` draws one vertical axis per variable and a line per item crossing each axis at its value. `Categories` are the variables and each series is one item.
```razor
```
```csharp
private readonly string[] _attributes = ["Battery", "Display", "Speed", "Weight", "Price"];
private readonly ChartSeries[] _laptops =
[
new("Aero 13", [9, 7, 6, 9, 5]),
new("Titan 16", [5, 9, 9, 4, 6])
];
```
## Different units
Every axis has its own scale, labelled with its lowest and highest value, so variables in different units can sit side by side.
```razor
```
```csharp
private readonly string[] _specs = ["Price (£k)", "Range (miles)", "0-60 (s)", "Boot (litres)"];
private readonly ChartSeries[] _cars =
[
new("Volt", [32, 250, 7.9, 380]),
new("Halo", [45, 330, 5.6, 420]),
new("Dash", [27, 190, 9.4, 310])
];
```
## Reading it
Lines that run in parallel between two axes mean the variables rise together. Lines that cross mean one rises as the other falls.
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwParallelCoordinatesChart
A parallel coordinates chart: one vertical axis per variable, with a line per item crossing each axis at its value, for comparing items across several variables at once.
| Parameter | Type | Description |
| --- | --- | --- |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwPieChart
> TwPieChart is a Blazor pie chart for parts of a whole. Set an inner radius for a donut chart, or draw it as a semicircle.
Documentation page: https://twblazor.com/chart/pie
## Basic usage
`TwPieChart` sizes each slice by its share of the whole. Pass a list of `ChartValue`. Slices large enough to hold a label show their share, and the legend names every slice.
```razor
```
```csharp
private readonly ChartValue[] _sources =
[
new("Search", 430),
new("Direct", 260),
new("Social", 170),
new("Email", 90),
new("Referral", 50)
];
```
## Donut
Set `InnerRadius` between 0 and 0.9 to open a hole in the middle, and `CenterText` to put a headline figure in it.
```razor
```
## Semicircle
Set `Semicircle` for a half donut, which takes less vertical space.
```razor
```
## Many values
A pie works for a handful of parts. Past eight values, the smallest are folded into one slice named by `OtherLabel` so a color is never reused. The table view still lists every value.
```razor
```
```csharp
private readonly ChartValue[] _countries =
[
new("United Kingdom", 320), new("United States", 280), new("Germany", 150), new("France", 120),
new("Spain", 90), new("Italy", 70), new("Canada", 60), new("Japan", 40), new("Brazil", 30), new("India", 20)
];
```
## Labels
`ShowPercentages` turns the share labels off. `LabelHeader` and `ValueHeader` name the table columns, and `ValueHeader` also names the value in tooltips.
## Summary
Tooltips and the table view give the value of each slice. Tooltips also give its share of the whole.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwPieChart
A pie chart: slices of a circle sized by each value's share of the whole. Set `InnerRadius` for a donut chart and `Semicircle` for a half donut.
| Parameter | Type | Description |
| --- | --- | --- |
| `InnerRadius` | `double` | Gets or sets the size of the hole in the middle, as a fraction of the radius from 0 (a pie) to 0.9. |
| `Semicircle` | `bool` | Gets or sets whether the chart is drawn as a half circle. |
| `ShowPercentages` | `bool` | Gets or sets whether slices large enough to hold a label show their share. |
| `CenterText` | `string?` | Gets or sets text shown in the hole of a donut, for example the total. |
| `Data` | `IReadOnlyList` | Gets or sets the values to plot. |
| `LabelHeader` | `string?` | Gets or sets the heading of the label column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `OtherLabel` | `string?` | Gets or sets the label of the slice that collects the smallest values once there are more values than colors. Defaults to the localized `Chart_Other` text ("Other"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwQuadrantChart
> TwQuadrantChart is a Blazor quadrant chart: a scatter plot split into four labelled regions by two thresholds, for sorting items into groups.
Documentation page: https://twblazor.com/chart/quadrant
## Basic usage
`TwQuadrantChart` is a scatter plot divided into four regions by a horizontal and a vertical line. Points are labelled by default, since the reader wants to know which item landed where.
```razor
```
```csharp
private readonly ChartPointSeries[] _backlog =
[
new("Features", [new(2, 8, "Search"), new(8, 9, "Billing"), new(3, 3, "Themes"), new(7, 2, "Importer"), new(4, 6, "Exports")])
];
```
## Quadrant labels
Name each region with `TopLeftLabel`, `TopRightLabel`, `BottomLeftLabel` and `BottomRightLabel`.
```razor
```
## Thresholds
The dividers sit in the middle of each axis unless you set `XThreshold` and `YThreshold` to the values that separate the groups.
```razor
```
## Inherited options
Everything on [TwScatterChart](https://twblazor.com/chart/scatter.md) is available, including bubble sizes and `ShowLabels`.
## Summary
Tooltips and the table view give the X and Y values of each point, and its size when it has one.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwQuadrantChart
A quadrant chart: a scatter plot divided into four labelled regions by a horizontal and a vertical threshold, for sorting items into groups such as "quick wins" and "major projects".
| Parameter | Type | Description |
| --- | --- | --- |
| `XThreshold` | `double?` | Gets or sets the X value of the vertical divider. |
| `YThreshold` | `double?` | Gets or sets the Y value of the horizontal divider. |
| `TopLeftLabel` | `string?` | Gets or sets the label of the top-left quadrant. |
| `TopRightLabel` | `string?` | Gets or sets the label of the top-right quadrant. |
| `BottomLeftLabel` | `string?` | Gets or sets the label of the bottom-left quadrant. |
| `BottomRightLabel` | `string?` | Gets or sets the label of the bottom-right quadrant. |
| `Series` | `IReadOnlyList` | Gets or sets the series of points to plot. |
| `XTitle` | `string` | Gets or sets the title of the horizontal axis. It also labels the X value in tooltips and the table view. |
| `YTitle` | `string` | Gets or sets the title of the vertical axis. It also labels the Y value in tooltips and the table view. |
| `SizeTitle` | `string?` | Gets or sets the label for a point's size in tooltips and the table view. Defaults to the localized `Chart_Size` text ("Size"). |
| `Connect` | `bool` | Gets or sets whether the points of each series are joined in order (a connected scatter plot). |
| `ShowLabels` | `bool` | Gets or sets whether each point that has a `Label` shows it beside the dot. |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwRadarChart
> TwRadarChart is a Blazor radar (spider) chart that compares a few items across several attributes on spokes around a center.
Documentation page: https://twblazor.com/chart/radar
## Basic usage
`TwRadarChart` gives each category a spoke around a center and draws each series as a shape joining its values. It needs at least three categories. All spokes share one scale starting at zero, so use values in the same unit, such as scores.
```razor
```
```csharp
private readonly string[] _attributes = ["Battery", "Display", "Speed", "Weight", "Price"];
private readonly ChartSeries[] _laptops =
[
new("Aero 13", [9, 7, 6, 9, 5]),
new("Titan 16", [5, 9, 9, 4, 6])
];
```
## Single series
With one series the chart shows a profile: where an item is strong and where it is weak.
```razor
```
```csharp
private readonly ChartSeries[] _aero = [new("Aero 13", [9, 7, 6, 9, 5])];
```
## Size
Radial charts are square. `Height` sets how wide the square may grow.
```razor
```
## When to use
Keep to two or three series, because overlapping shapes hide each other. For attributes in different units use [TwParallelCoordinatesChart](https://twblazor.com/chart/parallel-coordinates.md), which gives each its own scale.
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwRadarChart
A radar chart: one spoke per category around a center, with each series drawn as a shape joining its values, for comparing a few items across several attributes.
| Parameter | Type | Description |
| --- | --- | --- |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwRadialBarChart
> TwRadialBarChart is a Blazor radial bar chart: bars bent around a circle, one ring per value, each sweeping further for larger values.
Documentation page: https://twblazor.com/chart/radial-bar
## Basic usage
`TwRadialBarChart` bends each bar around a circle, one ring per value, over a track that shows the full scale. Labels sit at the start of each ring.
```razor
```
```csharp
private readonly ChartValue[] _sources =
[
new("Search", 430),
new("Direct", 260),
new("Social", 170),
new("Email", 90),
new("Referral", 50)
];
```
## Progress towards a goal
With values on a common scale, such as percentages, the rings read as progress.
```razor
```
```csharp
private readonly ChartValue[] _progress =
[
new("Basics", 100),
new("Layouts", 80),
new("Forms", 55),
new("Testing", 20)
];
```
## When to use
Outer rings are longer than inner rings for the same value, so read the angle swept, not the length. For precise comparison use [TwBarChart](https://twblazor.com/chart/bar.md).
## Summary
Tooltips and the table view give the value of each ring.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwRadialBarChart
A radial bar chart: bars bent around a circle, one ring per value, each sweeping further the larger its value.
| Parameter | Type | Description |
| --- | --- | --- |
| `Data` | `IReadOnlyList` | Gets or sets the values to plot. |
| `LabelHeader` | `string?` | Gets or sets the heading of the label column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `OtherLabel` | `string?` | Gets or sets the label of the slice that collects the smallest values once there are more values than colors. Defaults to the localized `Chart_Other` text ("Other"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwRadialHistogramChart
> TwRadialHistogramChart is a Blazor radial histogram that wraps equal-width bins around a circle, for cyclical values such as hours or bearings.
Documentation page: https://twblazor.com/chart/radial-histogram
## Basic usage
`TwRadialHistogramChart` takes raw `Values`, groups them into equal ranges and wraps the bars around a circle starting at the top. It suits values that cycle, where the last range sits naturally beside the first.
```razor
```
```csharp
private readonly double[] _ticketHours =
[
0.5, 2.2, 6.8, 7.4, 8.1, 8.3, 8.6, 9.0, 9.1, 9.2, 9.4, 9.7, 9.9, 10.1, 10.3, 10.4, 10.8, 11.2, 11.5, 11.9,
12.6, 13.1, 13.3, 13.8, 14.0, 14.2, 14.5, 14.9, 15.3, 15.6, 16.1, 16.4, 16.9, 17.5, 18.2, 19.6, 21.3, 23.9
];
```
## Choosing the bins
`BinCount` sets how many ranges the values are split into, from 4 to 36. Match it to the cycle: 24 for hours of the day, 12 for months, 8 or 16 for compass points.
```razor
```
## Directions
Bearings are the classic use: with eight bins each bar is a compass sector, north at the top.
```razor
```
```csharp
private readonly double[] _bearings =
[
0, 12, 198, 205, 211, 214, 219, 222, 225, 228, 230, 233, 236, 240, 244, 247, 251, 255, 262, 268,
271, 276, 284, 291, 302, 315, 334, 48, 95, 172, 186, 359.9
];
```
## When to use
Use a radial histogram for values that cycle, such as hours or bearings. Bars grow from an inner ring so small counts stay visible. For values that do not wrap around, prefer [TwHistogramChart](https://twblazor.com/chart/histogram.md), whose bars are easier to compare.
## Summary
Tooltips and the table view give the range and count of each bin.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwRadialHistogramChart
A radial histogram: the values are grouped into equal ranges that wrap around a circle, each bar reaching further out the more values fall in its range. It suits cyclical data such as hours of the day or compass bearings.
| Parameter | Type | Description |
| --- | --- | --- |
| `Values` | `IReadOnlyList` | Gets or sets the raw observations to group. |
| `BinCount` | `int` | Gets or sets how many bins to group the values into, from 4 to 36. |
| `RangeLabel` | `string?` | Gets or sets the label for a bin's range in the table view. Defaults to the localized `Chart_Range` text ("Range"). |
| `CountLabel` | `string?` | Gets or sets the label for a bin's count in tooltips and the table view. Defaults to the localized `Chart_Count` text ("Count"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwRangeChart
> TwRangeChart is a Blazor range chart that draws a floating bar from a low value to a high value per category, such as salary bands.
Documentation page: https://twblazor.com/chart/range
## Basic usage
`TwRangeChart` draws a floating bar from a low value to a high value for each category. Pass a list of `ChartRange`, each with a label, a low and a high.
```razor
```
```csharp
private readonly ChartRange[] _salaryBands =
[
new("Junior", 28, 38),
new("Mid", 36, 52),
new("Senior", 50, 72),
new("Lead", 65, 90)
];
```
## Vertical
Set `Vertical` to stand the bars up, which suits ranges over time such as daily temperatures.
```razor
```
```csharp
private readonly ChartRange[] _temperatures =
[
new("Mon", 8, 15),
new("Tue", 9, 17),
new("Wed", 11, 19),
new("Thu", 7, 14),
new("Fri", 6, 12)
];
```
## Labels
`LowLabel` and `HighLabel` name the two ends in tooltips and the table view, and `LabelHeader` names the first table column.
## Summary
Tooltips and the table view give the low and high value of each range.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwRangeChart
A range chart: a floating bar from a low value to a high value for each category, such as a temperature range or a salary band.
| Parameter | Type | Description |
| --- | --- | --- |
| `Ranges` | `IReadOnlyList` | Gets or sets the ranges to plot. |
| `Vertical` | `bool` | Gets or sets whether categories run left to right with values bottom to top, instead of the default rows with values left to right. |
| `LabelHeader` | `string?` | Gets or sets the heading of the label column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `LowLabel` | `string?` | Gets or sets the label for the low end of a range. Defaults to the localized `Chart_Low` text ("Low"). |
| `HighLabel` | `string?` | Gets or sets the label for the high end of a range. Defaults to the localized `Chart_High` text ("High"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwRidgelinePlotChart
> TwRidgelinePlotChart is a Blazor ridgeline plot that gives each group its own row and density curve, for comparing many distributions.
Documentation page: https://twblazor.com/chart/ridgeline
## Basic usage
`TwRidgelinePlotChart` draws one density curve per `ChartSample`, each on its own row with its name on the axis. Where a density plot overlays its curves, a ridgeline keeps them apart, so it copes with many more groups.
```razor
```
```csharp
private readonly ChartSample[] _deliveries =
[
new("January", [3, 4, 4, 5, 5, 5, 6, 6, 7, 8, 9]),
new("February", [2, 3, 3, 4, 4, 4, 5, 5, 6, 7]),
new("March", [1, 2, 2, 2, 3, 3, 3, 4, 4, 5])
];
```
## Many groups
Order the groups so a drift is easy to follow. Here the daily temperature shifts up and back down across the year. A larger `Height` gives each ridge more room.
```razor
```
```csharp
private readonly ChartSample[] _temperatures =
[
new("Jan", [4, 5, 6, 6, 7, 8, 8, 9, 10, 11]),
new("Mar", [7, 8, 9, 10, 10, 11, 12, 13, 14, 15]),
new("May", [13, 14, 15, 16, 17, 17, 18, 19, 20, 22]),
new("Jul", [18, 20, 21, 22, 23, 23, 24, 25, 27, 30]),
new("Sep", [14, 16, 17, 18, 18, 19, 20, 21, 22, 24]),
new("Nov", [6, 7, 8, 9, 9, 10, 11, 12, 13, 14])
];
```
## Side by side
Groups are listed top to bottom by default. Set `Horizontal` to `false` to stand the ridges side by side with values running up the plot.
```razor
```
## When to use
Use a ridgeline plot to compare the shape of many distributions. Each ridge is scaled to the height of its own row, so compare where the ridges sit and how wide they are, not how tall. For two or three groups, [TwDensityPlotChart](https://twblazor.com/chart/density-plot.md) puts them on one scale.
## Summary
Tooltips and the table view give the count, minimum, lower quartile, median, upper quartile and maximum of each group.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwRidgelinePlotChart
A ridgeline plot: one density curve per group, each on its own row, for comparing the shape of many distributions without the curves hiding one another.
| Parameter | Type | Description |
| --- | --- | --- |
| `Samples` | `IReadOnlyList` | Gets or sets the groups of raw observations to plot. |
| `Horizontal` | `bool` | Gets or sets whether groups are listed top to bottom with values running left to right. |
| `LabelHeader` | `string?` | Gets or sets the heading of the group column in the table view. Defaults to the localized `Chart_Group` text ("Group"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwSankeyChart
> TwSankeyChart is a Blazor Sankey diagram: nodes in columns joined by ribbons as thick as the flow between them.
Documentation page: https://twblazor.com/chart/sankey
## Basic usage
`TwSankeyChart` arranges `ChartGraphNode` values in columns and joins them with a ribbon for every `ChartGraphLink`, as thick as its value. A node sits to the right of every node that flows into it, and is as tall as what flows through it. Links refer to nodes by `Id`.
```razor
```
```csharp
private readonly ChartGraphNode[] _energyNodes =
[
new("solar", "Solar"), new("wind", "Wind"), new("gas", "Gas"),
new("grid", "Grid"),
new("homes", "Homes"), new("industry", "Industry")
];
private readonly ChartGraphLink[] _energyLinks =
[
new("solar", "grid", 25), new("wind", "grid", 40), new("gas", "grid", 35),
new("grid", "homes", 45), new("grid", "industry", 55)
];
```
## Several stages
Columns are worked out from the links, so a longer chain simply adds columns. This budget splits income into categories and then into line items, with everything it does not spend flowing to savings.
```razor
```
```csharp
private readonly ChartGraphNode[] _budgetNodes =
[
new("salary", "Salary"), new("bonus", "Bonus"),
new("income", "Income"),
new("housing", "Housing"), new("living", "Living"), new("savings", "Savings"),
new("rent", "Rent"), new("energy", "Energy"), new("food", "Food"), new("travel", "Travel"), new("leisure", "Leisure")
];
private readonly ChartGraphLink[] _budgetLinks =
[
new("salary", "income", 3200), new("bonus", "income", 400),
new("income", "housing", 1400), new("income", "living", 1300), new("income", "savings", 900),
new("housing", "rent", 1150), new("housing", "energy", 250),
new("living", "food", 520), new("living", "travel", 340), new("living", "leisure", 440)
];
```
## Setting the column
A node with nothing flowing into it starts in the first column. Set its `Stage` to move it further right, as with the visitors who join this funnel at the basket from a saved link.
```razor
```
```csharp
private readonly ChartGraphNode[] _funnelNodes =
[
new("home", "Home page"), new("product", "Product page"),
new("saved", "Saved link", Stage: 1),
new("basket", "Basket"), new("paid", "Paid"), new("left", "Abandoned")
];
private readonly ChartGraphLink[] _funnelLinks =
[
new("home", "product", 5200), new("product", "basket", 1900), new("saved", "basket", 600),
new("basket", "paid", 1400), new("basket", "left", 1100)
];
```
## When to use
Use a Sankey diagram to show how a quantity divides and recombines as it moves through stages. Links without a positive value are left out.
## Summary
Tooltips and the table view give the source, target and value of each link. Tooltips also give the total of each node. The arrow keys visit the nodes first, then the links.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwSankeyChart
A Sankey diagram: nodes in columns joined by ribbons as thick as the flow between them, for showing how a quantity divides and recombines as it moves through stages.
| Parameter | Type | Description |
| --- | --- | --- |
| `Nodes` | `IReadOnlyList` | Gets or sets the nodes. Each needs a unique `Id`; repeats are left out. |
| `Links` | `IReadOnlyList` | Gets or sets the links between nodes, by node identifier. Links that name a missing node, or join a node to itself, are left out. |
| `SourceHeader` | `string?` | Gets or sets the heading of the column naming where each link starts in the table view. Defaults to the localized `Chart_Source` text ("Source"). |
| `TargetHeader` | `string?` | Gets or sets the heading of the column naming where each link ends in the table view. Defaults to the localized `Chart_Destination` text ("Target"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels a link's value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwScatterChart
> TwScatterChart is a Blazor scatter plot that positions points by two values. Also draws bubble charts and connected scatter plots.
Documentation page: https://twblazor.com/chart/scatter
## Basic usage
`TwScatterChart` positions points by two numeric values to show how they relate. Pass one or more `ChartPointSeries`, each a named list of `ChartPoint`. `XTitle` and `YTitle` label the axes and name the values in tooltips and the table view.
```razor
```
```csharp
private readonly ChartPointSeries[] _products =
[
new("Audio", [new(49, 4.1, "Buds"), new(129, 4.6, "Studio"), new(79, 3.8, "Sport")]),
new("Wearables", [new(199, 4.4, "Pulse"), new(99, 3.6, "Band"), new(249, 4.7, "Pro")])
];
```
## Bubble chart
Give points a `Size` and each is drawn as a bubble whose area follows it, adding a third value. `SizeTitle` names it.
```razor
```
```csharp
private readonly ChartPointSeries[] _bubbles =
[
new("Audio", [new(49, 4.1, "Buds", 320), new(129, 4.6, "Studio", 180), new(79, 3.8, "Sport", 240)]),
new("Wearables", [new(199, 4.4, "Pulse", 150), new(99, 3.6, "Band", 410), new(249, 4.7, "Pro", 90)])
];
```
## Point labels
Set `ShowLabels` to print each point's `Label` beside it.
```razor
```
## Connected scatter plot
Set `Connect` to join the points of each series in order, tracing a path through two variables over time.
```razor
```
```csharp
private readonly ChartPointSeries[] _economy =
[
new("Economy", [new(4.1, 2.0, "2021"), new(3.8, 6.2, "2022"), new(4.3, 7.4, "2023"), new(4.6, 3.1, "2024"), new(4.4, 2.4, "2025")])
];
```
## Colors
Any two points can sit side by side, so keep to three series or fewer for colors that stay easy to tell apart.
## Summary
Tooltips and the table view give the X and Y values of each point, and its size when it has one.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwScatterChart
A scatter plot: points positioned by two numeric values to show how they relate. Give points a `Size` for a bubble chart, or set `Connect` for a connected scatter plot.
| Parameter | Type | Description |
| --- | --- | --- |
| `Series` | `IReadOnlyList` | Gets or sets the series of points to plot. |
| `XTitle` | `string` | Gets or sets the title of the horizontal axis. It also labels the X value in tooltips and the table view. |
| `YTitle` | `string` | Gets or sets the title of the vertical axis. It also labels the Y value in tooltips and the table view. |
| `SizeTitle` | `string?` | Gets or sets the label for a point's size in tooltips and the table view. Defaults to the localized `Chart_Size` text ("Size"). |
| `Connect` | `bool` | Gets or sets whether the points of each series are joined in order (a connected scatter plot). |
| `ShowLabels` | `bool` | Gets or sets whether each point that has a `Label` shows it beside the dot. |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwSlopeChart
> TwSlopeChart is a Blazor slope chart: a labelled line per series between two points in time, showing the direction and size of each change.
Documentation page: https://twblazor.com/chart/slope
## Basic usage
`TwSlopeChart` draws a straight line per series between two points in time and labels both ends, so the direction and size of each change is read from the slope. Use two categories for the classic form.
```razor
```
```csharp
private readonly string[] _years = ["2020", "2025"];
private readonly ChartSeries[] _share =
[
new("Aster", [34, 41]),
new("Birch", [28, 19]),
new("Cedar", [15, 26])
];
```
## More than two points
Extra categories add intermediate points. The first is labelled with the series name and value, and the last with its value.
```razor
```
```csharp
private readonly string[] _threeYears = ["2015", "2020", "2025"];
private readonly ChartSeries[] _shareByYear =
[
new("Aster", [22, 34, 41]),
new("Birch", [37, 28, 19]),
new("Cedar", [9, 15, 26])
];
```
## Formatting
`ValueFormat` applies to the end labels as well as the tooltips and table view.
```razor
```
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwSlopeChart
A slope chart: a straight line per series between two (or a few) points in time, labelled at both ends, so the direction and size of each change is read from the slope.
| Parameter | Type | Description |
| --- | --- | --- |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwSmallMultiplesChart
> TwSmallMultiplesChart is a Blazor small multiples chart: one small panel per series on a shared scale, for comparing many series clearly.
Documentation page: https://twblazor.com/chart/small-multiples
## Basic usage
`TwSmallMultiplesChart` repeats one simple chart per series, all on one shared scale so the panels can be compared at a glance. Reach for it when a single plot would hold too many series to tell apart.
```razor
```
```csharp
private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
private readonly ChartSeries[] _visitors =
[
new("Organic", [42, 48, 55, 61, 58, 70]),
new("Paid", [30, 34, 31, 45, 52, 49]),
new("Referral", [12, 15, 21, 19, 26, 33])
];
```
## Kind
`Kind` picks the mark drawn in each panel: `SmallMultipleKind.Column` (the default), `Line` or `Area`.
```razor
```
```razor
```
## Columns
Up to three panels share a row. Set `Columns` to change that, and `Height` to give several rows more room.
```razor
```
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwSmallMultiplesChart
Small multiples: the same simple chart repeated in a grid, one panel per series, all on one shared scale so the panels can be compared at a glance. Use it instead of crowding many series into one plot.
| Parameter | Type | Description |
| --- | --- | --- |
| `Kind` | `SmallMultipleKind` | Gets or sets the mark drawn in each panel: columns, a line or an area. |
| `Columns` | `int?` | Gets or sets how many panels sit in a row. |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwStreamGraphChart
> TwStreamGraphChart is a Blazor stream graph: stacked layers that flow around a central line to show how the make-up of a total shifts over time.
Documentation page: https://twblazor.com/chart/stream-graph
## Basic usage
`TwStreamGraphChart` stacks one smooth layer per series around the middle of the plot instead of on a baseline. The thickness of a layer is its value, and the outline of the whole stream is the total.
```razor
```
```csharp
private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
private readonly ChartSeries[] _sources =
[
new("Search", [24, 28, 26, 34, 38, 41]),
new("Direct", [16, 18, 22, 20, 19, 23]),
new("Social", [10, 14, 12, 18, 27, 22])
];
```
## Rise and fall
A stream graph is at its best when series come and go. Here each genre swells and fades in turn, which a stacked area chart would bury under a climbing baseline.
```razor
```
```csharp
private readonly string[] _years = ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"];
private readonly ChartSeries[] _genres =
[
new("Rock", [42, 40, 36, 31, 27, 24, 22, 20, 19, 18]),
new("Pop", [35, 38, 44, 48, 46, 41, 37, 35, 34, 33]),
new("Hip hop", [12, 18, 27, 36, 45, 52, 50, 44, 39, 36]),
new("Electronic", [8, 9, 11, 15, 22, 31, 40, 46, 43, 38]),
new("Podcasts", [0, 1, 3, 6, 12, 20, 29, 37, 48, 58])
];
```
## Hiding layers
Click a legend entry to remove its layer; the rest close up around the middle. Set `InteractiveLegend` to `false` to keep every layer in place.
```razor
```
## When to use
Use a stream graph for the changing make-up of a total. Only thickness carries meaning; a layer's height on the plot does not. Missing and negative values count as zero. When exact totals matter, use a stacked [TwAreaChart](https://twblazor.com/chart/area.md).
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwStreamGraphChart
A stream graph: a stacked area chart whose layers flow around a central line instead of rising from a baseline, emphasising how the make-up of a total shifts over time.
| Parameter | Type | Description |
| --- | --- | --- |
| `Categories` | `IReadOnlyList` | Gets or sets the category labels, in order. |
| `Series` | `IReadOnlyList` | Gets or sets the series to plot. Each holds one value per category. |
| `CategoryHeader` | `string?` | Gets or sets the heading of the category column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwStripPlotChart
> TwStripPlotChart is a Blazor strip plot that draws every observation as a dot, one strip per group. Add jitter to separate overlaps.
Documentation page: https://twblazor.com/chart/strip-plot
## Basic usage
`TwStripPlotChart` draws every observation in a `ChartSample` as a dot along the value axis, one strip per group, so the raw spread and any clusters are visible.
```razor
```
```csharp
private readonly ChartSample[] _services =
[
new("Search", [112, 120, 131, 135, 138, 142, 144, 149, 151, 153, 290]),
new("Checkout", [156, 158, 160, 163, 167, 170, 172, 176, 181, 185]),
new("Reports", [190, 196, 204, 215, 228, 240, 262, 150, 310])
];
```
## Jitter
Set `Jitter` to nudge dots sideways so overlapping values stay visible. The nudge is repeatable: the same data always draws the same picture.
```razor
```
## Horizontal
Set `Horizontal` to list the groups down the side.
```razor
```
## When to use
A strip plot suits small samples. For large ones, summarise with [TwBoxPlotChart](https://twblazor.com/chart/box-plot.md) or [TwHistogramChart](https://twblazor.com/chart/histogram.md).
## Summary
Tooltips and the table view give the count, minimum, lower quartile, median, upper quartile and maximum of each group.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwStripPlotChart
A strip plot: every observation drawn as a dot along the value axis, one strip per group, so the raw spread and any clusters are visible. Set `Jitter` to spread overlapping dots sideways (a jitter plot).
| Parameter | Type | Description |
| --- | --- | --- |
| `Jitter` | `bool` | Gets or sets whether dots are nudged sideways by a small, repeatable amount so overlapping values stay visible. |
| `Samples` | `IReadOnlyList` | Gets or sets the groups of raw observations to plot. |
| `Horizontal` | `bool` | Gets or sets whether groups are listed top to bottom with values running left to right. |
| `LabelHeader` | `string?` | Gets or sets the heading of the group column in the table view. Defaults to the localized `Chart_Group` text ("Group"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwSunburstChart
> TwSunburstChart is a Blazor sunburst chart: a tree drawn as rings, each segment sized by its share of the whole.
Documentation page: https://twblazor.com/chart/sunburst
## Basic usage
`TwSunburstChart` draws a tree of `ChartHierarchyNode` values as rings. The top-level nodes form the inner ring and each node's children sit around it in the next ring out, every segment sized by its share of the whole.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _sales =
[
new("North", Children: [new("Hardware", 38), new("Software", 24)]),
new("South", Children: [new("Hardware", 28), new("Software", 16)])
];
```
## Three rings
Each top-level node has its own color and its descendants are lighter tints of it, so a branch reads as one family all the way out. A larger `Height` leaves more segments room for their names.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _visits =
[
new("Search", Children:
[
new("Organic", Children: [new("Mobile", 4200), new("Desktop", 3100)]),
new("Paid", Children: [new("Mobile", 1800), new("Desktop", 900)])
]),
new("Social", Children:
[
new("Video", Children: [new("Mobile", 2600), new("Desktop", 400)]),
new("Posts", Children: [new("Mobile", 1500), new("Desktop", 700)])
]),
new("Direct", Children: [new("Mobile", 1900), new("Desktop", 2400)])
];
```
## Uneven branches
Branches need not be the same depth. A node without children simply ends at its own ring, leaving the rings beyond it empty.
```razor
```
```csharp
private readonly ChartHierarchyNode[] _spending =
[
new("Housing", Children: [new("Rent", 1150), new("Energy", 180), new("Water", 45)]),
new("Food", Children: [new("Groceries", 420), new("Eating out", Children: [new("Lunches", 90), new("Dinners", 140)])]),
new("Transport", Children: [new("Rail", 210), new("Car", 130)]),
new("Savings", 400)
];
```
## When to use
Use a sunburst chart to show shares at every level of a tree. Names that do not fit are cut short or left off. Nodes with no value are left out.
## Summary
Tooltips and the table view give the path and the value of each segment. Tooltips also give its share of the whole. The arrow keys visit a segment, then its children, then the next segment.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwSunburstChart
A sunburst chart: a tree drawn as rings, with the top-level nodes in the middle and each node's children around it, every segment sized by its share of the whole.
| Parameter | Type | Description |
| --- | --- | --- |
| `Roots` | `IReadOnlyList` | Gets or sets the top-level nodes of the tree. |
| `LabelHeader` | `string?` | Gets or sets the heading of the node column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwTreemapChart
> TwTreemapChart is a Blazor treemap: rectangles that tile the plot, each sized by its value, showing many parts of a whole compactly.
Documentation page: https://twblazor.com/chart/treemap
## Basic usage
`TwTreemapChart` tiles the plot with rectangles sized by value. Tiles are laid out largest first and kept close to square so their areas are easy to compare. Tiles with room show their label; every tile has a tooltip.
```razor
```
```csharp
private readonly ChartValue[] _sources =
[
new("Search", 430),
new("Direct", 260),
new("Social", 170),
new("Email", 90),
new("Referral", 50)
];
```
## Many values
A treemap copes with far more parts than a pie, which makes it a good fit for long-tailed data.
```razor
```
```csharp
private readonly ChartValue[] _folders =
[
new("Videos", 180), new("Photos", 120), new("Projects", 75), new("Music", 48), new("Documents", 30),
new("Downloads", 22), new("Backups", 16), new("Apps", 12), new("Fonts", 5), new("Temp", 3)
];
```
## Values
Negative and zero values have no area, so they are left out of the plot. They still appear in the table view.
## Summary
Tooltips and the table view give the value of each tile. Tooltips also give its share of the whole.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwTreemapChart
A treemap: rectangles that tile the plot, each sized by its value, for showing many parts of a whole in a compact space.
| Parameter | Type | Description |
| --- | --- | --- |
| `Data` | `IReadOnlyList` | Gets or sets the values to plot. |
| `LabelHeader` | `string?` | Gets or sets the heading of the label column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `OtherLabel` | `string?` | Gets or sets the label of the slice that collects the smallest values once there are more values than colors. Defaults to the localized `Chart_Other` text ("Other"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwVennDiagramChart
> TwVennDiagramChart is a Blazor Venn diagram: up to three sets as equal overlapping circles, with the shared count where each pair meets.
Documentation page: https://twblazor.com/chart/venn-diagram
## Basic usage
`TwVennDiagramChart` draws each `ChartSet` as a circle and overlaps them all. A `ChartSetIntersection` names two sets and how many elements they share; that number is written where the two circles meet.
```razor
```
```csharp
private readonly ChartSet[] _skills = [new("Research", 38), new("Design", 32), new("Engineering", 44)];
private readonly ChartSetIntersection[] _sharedSkills =
[
new("Research", "Design", 14),
new("Design", "Engineering", 9),
new("Research", "Engineering", 6)
];
```
## Two sets
With two sets the circles sit side by side. Intersections can name their sets in either order.
```razor
```
```csharp
private readonly ChartSet[] _audiences = [new("Newsletter", 120), new("App", 85)];
private readonly ChartSetIntersection[] _sharedAudience = [new("App", "Newsletter", 40)];
```
## Missing overlaps
A Venn diagram always draws every possible overlap. A pair with no intersection given still overlaps on the plot but shows no number. To draw only the overlaps that exist, with circles sized by their sets, use [TwEulerDiagramChart](https://twblazor.com/chart/euler-diagram.md).
```razor
```
```csharp
private readonly ChartSet[] _features = [new("Reports", 2400), new("Exports", 1100), new("Alerts", 860)];
private readonly ChartSetIntersection[] _sharedFeatures = [new("Reports", "Exports", 940), new("Reports", "Alerts", 310)];
```
## When to use
Use a Venn diagram to show which sets overlap. The circles are all the same size, so read the numbers, not the areas. Up to three sets are drawn, and sets with no size are left out. To size the circles by their sets, use [TwEulerDiagramChart](https://twblazor.com/chart/euler-diagram.md).
## Summary
Tooltips and the table view give the size of each set and of each overlap.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwVennDiagramChart
A Venn diagram: up to three sets drawn as equal circles that all overlap, with the number of shared elements written where each pair meets.
| Parameter | Type | Description |
| --- | --- | --- |
| `Sets` | `IReadOnlyList` | Gets or sets the sets to draw. Up to three are shown; sets with no size are left out. |
| `Intersections` | `IReadOnlyList` | Gets or sets how many elements each pair of sets shares. Each is named by the labels of its two sets. |
| `LabelHeader` | `string?` | Gets or sets the heading of the set column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the size column in the table view. It also labels a set's size in tooltips. Defaults to the localized `Chart_Size` text ("Size"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwViolinPlotChart
> TwViolinPlotChart is a Blazor violin plot that shows the full shape of each group's distribution with its median and middle half marked.
Documentation page: https://twblazor.com/chart/violin-plot
## Basic usage
`TwViolinPlotChart` draws a mirrored density curve for each `ChartSample`: wide where values cluster, narrow where they are rare. The bar down the middle spans the middle half of the values and the dot marks the median.
```razor
```
```csharp
private readonly ChartSample[] _classes =
[
new("Class A", [48, 55, 58, 61, 63, 64, 66, 67, 69, 71, 74, 78, 85]),
new("Class B", [52, 60, 66, 70, 72, 74, 75, 76, 78, 80, 83, 88, 94]),
new("Class C", [35, 42, 51, 57, 62, 68, 71, 77, 82, 86, 90])
];
```
## Shapes a box plot hides
These two teams have almost the same median and quartiles, so their box plots would look alike. The violins show that one is evenly spread while the other splits into a fast group and a slow group.
```razor
```
```csharp
private readonly ChartSample[] _teams =
[
new("Evenly spread", [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]),
new("Two groups", [2, 3, 3, 4, 4, 5, 20, 21, 21, 22, 23, 24])
];
```
## Horizontal
Set `Horizontal` to list the groups down the side, which suits long names and many groups.
```razor
```
## When to use
Use a violin plot when the shape of each distribution matters. Each violin is drawn to the full width of its slot and ends at the group's lowest and highest values, so compare the shapes, not the widths. For a plain summary use [TwBoxPlotChart](https://twblazor.com/chart/box-plot.md).
## Summary
Tooltips and the table view give the count, minimum, lower quartile, median, upper quartile and maximum of each group.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwViolinPlotChart
A violin plot: for each group, a mirrored density curve showing where its values concentrate, with a bar across the middle half of the values and a dot at the median.
| Parameter | Type | Description |
| --- | --- | --- |
| `Samples` | `IReadOnlyList` | Gets or sets the groups of raw observations to plot. |
| `Horizontal` | `bool` | Gets or sets whether groups are listed top to bottom with values running left to right. |
| `LabelHeader` | `string?` | Gets or sets the heading of the group column in the table view. Defaults to the localized `Chart_Group` text ("Group"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwWaffleChart
> TwWaffleChart is a Blazor waffle chart: a ten by ten grid of squares, each worth one percent, colored by each value's share.
Documentation page: https://twblazor.com/chart/waffle
## Basic usage
`TwWaffleChart` shows parts of a whole as a ten by ten grid where each square is one percent. Counting squares is easier than judging angles, so small differences read more reliably than on a pie.
```razor
```
```csharp
private readonly ChartValue[] _sources =
[
new("Search", 430),
new("Direct", 260),
new("Social", 170),
new("Email", 90),
new("Referral", 50)
];
```
## Two parts
It is at its clearest for a single share against the rest.
```razor
```
```csharp
private readonly ChartValue[] _responses =
[
new("Responded", 62),
new("No response", 38)
];
```
## Rounding
Squares are shared out so the grid is always full, even when the shares do not round to whole percentages. The legend states each exact share.
## Summary
Tooltips and the table view give the value of each category. Tooltips also give its share of the whole.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwWaffleChart
A waffle chart: a ten by ten grid of squares, each worth one percent, colored by the share of each value. It shows parts of a whole in countable units, which is easier to read than angles.
| Parameter | Type | Description |
| --- | --- | --- |
| `Data` | `IReadOnlyList` | Gets or sets the values to plot. |
| `LabelHeader` | `string?` | Gets or sets the heading of the label column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `OtherLabel` | `string?` | Gets or sets the label of the slice that collects the smallest values once there are more values than colors. Defaults to the localized `Chart_Other` text ("Other"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwWaterfallChart
> TwWaterfallChart is a Blazor waterfall chart: floating columns that show how increases and decreases build up to a total.
Documentation page: https://twblazor.com/chart/waterfall
## Basic usage
`TwWaterfallChart` shows how a series of changes builds up to a result. Each `ChartValue` in `Data` is a change, positive or negative, and each column floats from where the previous one ended. A total column is added for you. Direction is shown by color and named in the legend and tooltips, so it never depends on color alone.
```razor
```
```csharp
private readonly ChartValue[] _bridge =
[
new("Sales", 520),
new("Services", 140),
new("Cost of goods", -210),
new("Salaries", -180),
new("Marketing", -60)
];
```
## Value labels
Set `ShowValues` to label each column with its signed change.
```razor
```
## Total and labels
Set `ShowTotal` to `false` to leave out the final column. `TotalLabel`, `IncreaseLabel` and `DecreaseLabel` rename the legend entries.
```razor
```
## Summary
Tooltips and the table view give the change at each step. Tooltips also give the running total.
## Shared features
The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See [TwChart](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwWaterfallChart
A waterfall chart: floating columns that show how a series of increases and decreases build up to a total.
| Parameter | Type | Description |
| --- | --- | --- |
| `ShowTotal` | `bool` | Gets or sets whether a final column showing the running total is added. |
| `TotalLabel` | `string?` | Gets or sets the label of the total column. Defaults to the localized `Chart_Total` text ("Total"). |
| `IncreaseLabel` | `string?` | Gets or sets the legend label for positive changes. Defaults to the localized `Chart_Increase` text ("Increase"). |
| `DecreaseLabel` | `string?` | Gets or sets the legend label for negative changes. Defaults to the localized `Chart_Decrease` text ("Decrease"). |
| `ShowValues` | `bool` | Gets or sets whether each column is labelled with its change. |
| `Data` | `IReadOnlyList` | Gets or sets the values to plot. |
| `LabelHeader` | `string?` | Gets or sets the heading of the label column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `OtherLabel` | `string?` | Gets or sets the label of the slice that collects the smallest values once there are more values than colors. Defaults to the localized `Chart_Other` text ("Other"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwWordCloudChart
> TwWordCloudChart is a Blazor word cloud: words sized by their values and gathered around the middle of the plot.
Documentation page: https://twblazor.com/chart/word-cloud
## 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.
```razor
```
```csharp
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.
```razor
```
```csharp
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.
```razor
```
```csharp
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](https://twblazor.com/chart/bar.md).
## 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](https://twblazor.com/chart.md) for those options.
## Keyboard navigation
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. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwWordCloudChart
A word cloud: words sized by their values and gathered around the middle of the plot, for a quick impression of which terms dominate a body of text.
| Parameter | Type | Description |
| --- | --- | --- |
| `Data` | `IReadOnlyList` | Gets or sets the values to plot. |
| `LabelHeader` | `string?` | Gets or sets the heading of the label column in the table view. Defaults to the localized `Chart_Category` text ("Category"). |
| `ValueHeader` | `string?` | Gets or sets the heading of the value column in the table view. It also labels the value in tooltips. Defaults to the localized `Chart_Value` text ("Value"). |
| `OtherLabel` | `string?` | Gets or sets the label of the slice that collects the smallest values once there are more values than colors. Defaults to the localized `Chart_Other` text ("Other"). |
| `Height` | `ChartHeight?` | Gets or sets the height of the plot area. |
| `ShowLegend` | `bool` | Gets or sets whether the legend is shown when the chart has one. |
| `InteractiveLegend` | `bool` | Gets or sets whether clicking a legend entry hides or shows its series. |
| `ShowTableToggle` | `bool` | Gets or sets whether the button that switches between the plot and a table of the same data is shown. |
| `TableViewLabel` | `string?` | Gets or sets the label of the button that switches to the table view. Defaults to the localized `Chart_ViewAsTable` text ("View as table"). |
| `ChartViewLabel` | `string?` | Gets or sets the label of the button that switches back to the plot. Defaults to the localized `Chart_ViewAsChart` text ("View as chart"). |
| `TableLabel` | `string?` | Gets or sets the accessible name of the table view. Defaults to the localized `Chart_TableLabel` text ("Chart data"). |
| `LegendLabel` | `string?` | Gets or sets the accessible name of the legend. Defaults to the localized `Chart_Legend` text ("Legend"). |
| `EmptyText` | `string?` | Gets or sets the message shown when there is no data to plot. Defaults to the localized `Chart_Empty` text ("No data to display"). |
| `ValueFormat` | `string?` | Gets or sets the .NET numeric format string used for values on axes, tooltips and the table view, for example `"C0"` or `"0.0%"`. |
| `ValueFormatter` | `Func?` | Gets or sets a function that formats values, for full control over units and abbreviations. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
---
# TwCheckbox
> TwCheckbox is a Blazor checkbox component. Bind Value or SelectedValues, set Color, Size, Disabled and Horizontal, or generate a group from Items.
Documentation page: https://twblazor.com/checkbox
## Basic usage
Group checkboxes with `TwCheckboxGroup` and bind individual values with `@bind-Value`.
```razor
```
```csharp
private bool sports = true;
private bool music = false;
private bool reading = true;
private bool gaming = false;
```
## Sizes
Use `Size` to render a smaller or larger checkbox. Defaults to `Size.Md`, the original size.
```razor
` and pass `null` to render it indeterminate - useful for a "select all" checkbox that reflects a partially-selected list below it. Clicking an indeterminate checkbox always resolves it to fully checked or unchecked; there's no click gesture that produces the indeterminate state itself.
```razor
Selected: @string.Join(", ", selectedLanguages?.Select(l => l.ToString()) ?? Enumerable.Empty())
Enabled notifications:
@foreach (var notif in selectedNotifications ?? Enumerable.Empty())
{
- @notif
}
```
```csharp
public enum ProgrammingLanguage
{
CSharp,
JavaScript,
Python,
TypeScript,
Java
}
private readonly List> _languageItems = new()
{
new() { Label = "C#", Value = ProgrammingLanguage.CSharp, IsSelected = true },
new() { Label = "JavaScript", Value = ProgrammingLanguage.JavaScript, IsSelected = true },
new() { Label = "Python", Value = ProgrammingLanguage.Python, IsSelected = false },
new() { Label = "TypeScript", Value = ProgrammingLanguage.TypeScript, IsSelected = false },
new() { Label = "Java", Value = ProgrammingLanguage.Java, IsSelected = false }
};
private IEnumerable? selectedLanguages = new[] { ProgrammingLanguage.CSharp, ProgrammingLanguage.JavaScript };
private readonly List> _notificationItems = new()
{
new() { Label = "Email notifications", Value = "Email", IsSelected = true },
new() { Label = "SMS notifications", Value = "SMS", IsSelected = false },
new() { Label = "Push notifications", Value = "Push", IsSelected = true }
};
private IEnumerable? selectedNotifications = new[] { "Email", "Push" };
```
## Horizontal layout & custom spacing
Use `Horizontal` to arrange checkboxes side-by-side, or `Spacing="4"` for custom spacing.
```razor
```
```csharp
private bool monday = true;
private bool tuesday = true;
private bool wednesday = false;
private bool thursday = true;
private bool friday = true;
private bool agreeTerms = false;
private bool agreePrivacy = false;
private bool agreeNewsletter = false;
```
## Disabled state
Disable the entire group with the `Disabled` property.
```razor
```
## Programmatic control
Change selections programmatically by updating the bound collection.
```razor
Selected: @string.Join(", ", selectedDays ?? Enumerable.Empty())
```
```csharp
private readonly List> _dayItems = new()
{
new() { Label = "Monday", Value = DayOfWeek.Monday, IsSelected = false },
new() { Label = "Tuesday", Value = DayOfWeek.Tuesday, IsSelected = false },
new() { Label = "Wednesday", Value = DayOfWeek.Wednesday, IsSelected = false },
new() { Label = "Thursday", Value = DayOfWeek.Thursday, IsSelected = false },
new() { Label = "Friday", Value = DayOfWeek.Friday, IsSelected = false },
new() { Label = "Saturday", Value = DayOfWeek.Saturday, IsSelected = false },
new() { Label = "Sunday", Value = DayOfWeek.Sunday, IsSelected = false }
};
private IEnumerable? selectedDays = Enumerable.Empty();
private void SelectWeekdays()
{
selectedDays = new[] { DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday };
}
private void SelectWeekend()
{
selectedDays = new[] { DayOfWeek.Saturday, DayOfWeek.Sunday };
}
private void ClearDays()
{
selectedDays = Enumerable.Empty();
}
```
## Keyboard navigation
A checkbox is a native checkbox, so it behaves as one. A read-only checkbox can be focused but not changed.
| Key | What it does |
| --- | --- |
| `Tab` | Moves focus to the checkbox. |
| `Space` | Checks or unchecks it. |
## Parameters
This is every parameter the component accepts. Do not use parameters that are not listed here.
### TwCheckbox
Represents a generic checkbox input component for Blazor that supports two-way data binding and customizable value types.
| Parameter | Type | Description |
| --- | --- | --- |
| `Name` | `string` | Gets or sets the name associated with the component. |
| `Color` | `Color?` | Gets or sets the color of the checkbox. |
| `Size` | `Size` | Gets or sets the size of the checkbox and its check/dash icon. Defaults to `Md`, the same dimensions this component has always rendered at. |
| `Value` | `T` | Gets or sets the current value of the parameter. |
| `ValueChanged` | `EventCallback` | Gets or sets the callback that is invoked when the value changes. |
| `RootId` | `string` | Gets or sets the unique identifier for the root element. |
| `RootClass` | `string` | Gets or sets the CSS class name applied to the root element of the component. |
| `RootAttributes` | `Dictionary` | Gets or sets the additional attributed applied to the root element of the component. |
| `Label` | `string` | Gets or sets the text label associated with the component. |
| `LabelId` | `string` | Gets or sets the unique identifier for the associated label element. |
| `LabelAttributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the label element. |
| `LabelClass` | `string` | Gets or sets the classes for the label. |
| `ReadOnly` | `bool` | Gets or sets whether the input component is readonly. |
| `Disabled` | `bool` | Gets or sets whether the input component is disabled. |
| `Invalid` | `bool` | Gets or sets whether the input component currently fails validation. |
| `ErrorMessage` | `string` | Gets or sets the validation error message to display and associate with the input. |
| `Id` | `string?` | Gets or sets the unique identifier for the component. |
| `Class` | `string` | Gets or sets the CSS class(es) to apply to the component. |
| `Style` | `string?` | Gets or sets inline CSS styles to apply to the component. |
| `Attributes` | `Dictionary` | Gets or sets a collection of additional attributes to apply to the component. |
| `AriaLabel` | `string?` | Gets or sets the ARIA label for accessibility. |
| `AriaLabelledBy` | `string?` | Gets or sets the ID of another element that labels this component for accessibility. |
| `Shadow` | `Shadow?` | Gets or sets the shadow (elevation) level for the component. |
| `Rounded` | `Rounded?` | Gets or sets the border radius for the component. |
### TwCheckboxGroup
Represents a container component for grouping multiple `TwCheckbox` components together.
| Parameter | Type | Description |
| --- | --- | --- |
| `ChildContent` | `RenderFragment?` | Gets or sets the content to display within the checkbox group. |
| `Legend` | `string?` | Gets or sets the legend text for the checkbox group. |
| `LegendClass` | `string?` | Gets or sets the CSS class for the legend element. |
| `Horizontal` | `bool` | Gets or sets the orientation of the checkbox group. |
| `Disabled` | `bool` | Gets or sets whether the entire checkbox group is disabled. |
| `Name` | `string?` | Gets or sets the name for all checkboxes in the group. |
| `Items` | `IEnumerable>?` | Gets or sets the collection of items to display as checkboxes (for automatic mode). |
| `SelectedValues` | `IEnumerable
Slide 1
Slide 2
Slide 3
@foreach (var fit in _objectFitOptions)
{
Slide 1
Slide 2
Slide 3
Slide 1
Slide 2
Slide 3
Slide 1
Slide 2
Slide 1
Slide 2
Slide 3
Selected slide: @(selectedIndex + 1)
Slide 1
Slide 2
Slide 3
Slide 1
Slide 2
Slide 3
@for (var i = 0; i < 3; i++)
{
var index = i;
@(index + 1)
}
Slide 1
Slide 2
Slide 3
Selected: @string.Join(", ", selectedLanguages?.Select(l => l.ToString()) ?? Enumerable.Empty
Enabled notifications:
-
@foreach (var notif in selectedNotifications ?? Enumerable.Empty
- @notif }
Selected: @string.Join(", ", selectedDays ?? Enumerable.Empty