MarimekkoChart: Blazor marimekko chart component

Examples

Basic

Each MarimekkoCell gives the Value of a Segment in a Column. Cells show their share of the column where they fit; columns show their share of the total.

Customers by region and plan

Free Starter Pro Enterprise

website/Examples/Charts/MarimekkoChartBasicExample.razor Source

Segment colours

SegmentColors maps a segment name to any CSS colour; ShowValues="false" leaves the cells plain.

Free Starter Pro Enterprise

website/Examples/Charts/MarimekkoChartColorsExample.razor Source

Playground

Customers by region and plan

Free Starter Pro Enterprise

ShowValues

ShowLegend

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<MarimekkoChart
                ValueFormat="{0:N0} customers"
                Title="Customers by region and plan"
                Cells="@_customers" />

@code {
    private readonly MarimekkoCell[] _customers =
    [
        new("North America", "Free", 820), new("North America", "Starter", 410), new("North America", "Pro", 290), new("North America", "Enterprise", 85),
        new("Europe", "Free", 640), new("Europe", "Starter", 300), new("Europe", "Pro", 180), new("Europe", "Enterprise", 40),
        new("Asia Pacific", "Free", 520), new("Asia Pacific", "Starter", 150), new("Asia Pacific", "Pro", 70), new("Asia Pacific", "Enterprise", 12),
        new("Latin America", "Free", 210), new("Latin America", "Starter", 60), new("Latin America", "Pro", 20), new("Latin America", "Enterprise", 4),
    ];
}

API

<MarimekkoChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Cells IReadOnlyList<MarimekkoCell>
= []
The values: how much of each Segment there is in each Column. Columns and segments keep the order they first appear in; only positive values count.
RowHeight double?
= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
SegmentColors IReadOnlyDictionary<string, string>
= null
Optional colour per segment name (any CSS colour); other segments cycle through the theme palette.
ShowLegend bool
= true
Show the segment colours under the chart.
ShowTitle bool
= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
ShowValues bool
= true
Print each cell's share of its column inside it, where it fits.
Title string
= null
Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat string
= "{0:#,0.##}"
Format string for values in tooltips.
Width string
= "100%"
CSS width of the chart wrapper.
Class string
= null
Additional CSS classes merged onto the w-full wrapper.
Style string
= null
Inline styles appended after the width on the wrapper.

Name	Type	Default	Description
AspectRatio	double	1.78	Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Cells	IReadOnlyList<MarimekkoCell>	[]	The values: how much of each Segment there is in each Column. Columns and segments keep the order they first appear in; only positive values count.
RowHeight	double?	null	Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
SegmentColors	IReadOnlyDictionary<string, string>	null	Optional colour per segment name (any CSS colour); other segments cycle through the theme palette.
ShowLegend	bool	true	Show the segment colours under the chart.
ShowTitle	bool	true	Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
ShowValues	bool	true	Print each cell's share of its column inside it, where it fits.
Title	string	null	Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat	string	"{0:#,0.##}"	Format string for values in tooltips.
Width	string	"100%"	CSS width of the chart wrapper.
Class	string	null	Additional CSS classes merged onto the w-full wrapper.
Style	string	null	Inline styles appended after the width on the wrapper.