Charts

TwMarimekkoChart

TwMarimekkoChart is a Blazor Marimekko chart: columns whose widths show each category's total and whose segments show each series' share of it.

Last updated 18 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

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.

Sales by region and productThousands of pounds

RAZOR

<TwChart Title="Sales by region and product" Description="Thousands of pounds">
    <TwMarimekkoChart Categories="@_regions" Series="@_products" />
</TwChart>

CSHARP

@code {
    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.

Cloud spend by industry and providerMillions of pounds per year

RAZOR

<TwChart Title="Cloud spend by industry and provider" Description="Millions of pounds per year">
    <TwMarimekkoChart Categories="@_industries" Series="@_providers" CategoryHeader="Industry" ValueFormat="C0" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    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.

Support tickets by channel and outcome

RAZOR

<TwChart Title="Support tickets by channel and outcome">
    <TwMarimekkoChart Categories="@_channels" Series="@_outcomes" CategoryHeader="Channel" />
</TwChart>

CSHARP

@code {
    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 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 for those options.

The plot is a single Tab stop. Each data point is announced with its series and value as focus reaches it, and the table view presents the same data without the plot.

Key	What it does
`Tab`	Moves focus into the plot, onto the data point last visited.
`Arrow Right` or `Arrow Down`	Moves to the next data point.
`Arrow Left` or `Arrow Up`	Moves to the previous data point.
`Home` or `End`	Moves to the first or last data point.
`Escape`	Hides the tooltip of the focused data point.
`Enter` or `Space`	On a legend item: shows or hides that series. On the table button: switches between the chart and its data table.

TwMarimekkoChart

Basic usage

A market map

Uneven categories

When to use

Summary

Shared features

Keyboard navigation