Skip to main content

Mekko chart

info

Charts are available with Avalonia Pro.

Mekko charts, also called Marimekko charts, use variable column widths and stacked segment heights to compare market size and composition in one view.

When to use​

  • Market structure: Compare category share and internal segment mix at the same time.
  • Portfolio composition: Show total size and breakdown per group.
  • Multi-dimensional comparison: Replace separate width and stacked-bar views with one chart.

Code example​

XAML​

<charts:MekkoChart Title="Market mix"
                             Height="320"
                             ItemsSource="{Binding MekkoData}"
                             CategoryPath="Category"
                             WidthPath="Width"
                             SegmentsPath="Segments" />

Data model (C#)​

public record MekkoSegment(string Name, double Value);
public record MekkoColumn(string Category, double Width, ObservableCollection<MekkoSegment> Segments);

public ObservableCollection<MekkoColumn> MekkoData { get; } = new()
{
    new("North", 35, new() { new("Retail", 18), new("Online", 12), new("Partner", 5) }),
    new("South", 25, new() { new("Retail", 10), new("Online", 9), new("Partner", 6) })
};

Common properties​

PropertyDescriptionDefault
ItemsSourceCollection of Mekko columns.null
CategoryPathPath to the column label.null
WidthPathPath to the value that controls column width.null
SegmentsPathPath to the segment collection for each column.null
ColumnGapGap between columns.2.0
ShowLabelsWhether to show column labels.true
ShowPercentagesWhether to draw percentage labels inside segments.true

See also​

On this page