Mekko chart

A Mekko chart (also known as a Marimekko or mosaic chart) shows two measures at once as stacked columns: widthMeasure sets each column’s width, and heightMeasure sets the height of the segments stacked inside it. Use it to compare the size and the composition of categories at the same time — for example, market share by width and product mix by height.

Buckets

Sorting

Mekko applies no default sorting. To sort the data, pass sort items in the sortBy prop. With stackBy set, measure sorts don’t go to the execution. The chart applies the first measure sort in sortBy in the browser, provided it sorts by widthMeasure or heightMeasure, and orders the columns by their total value of that measure. Other measure sorts are ignored. Attribute sorts go to the execution.

Configuration

Pass these options in the config prop. See Chart configuration for details.

Limits

• A column can’t have a negative width. If a column’s widthMeasure value is negative, the chart shows an error and onError receives a NegativeValuesSdkError. With stackBy, the check uses the sum of the column’s segments. Negative heightMeasure values are allowed.
• Columns whose widthMeasure value (with stackBy, the sum of their segments) is zero or empty aren’t drawn.
• Without heightMeasure and stackBy, the chart draws flat columns, labels them with their widthMeasure values when data labels are on, and hides the Y axis. With stackBy, it stacks each column’s segments to 100% by their widthMeasure values instead.
• A Mekko chart renders up to 10,000 columns and up to 10,000 stackBy values. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.
• Mekko charts work best with a moderate number of viewBy and stackBy values — too many columns or segments make the relative widths and heights hard to compare.

Usage patterns

Width and height measures

widthMeasure controls how wide each column is relative to the others, and heightMeasure controls how tall the stacked segments inside it are. viewBy creates one column per attribute value, and stackBy splits each column into segments:

<Mekko
    widthMeasure={Md.$MarketSize}
    heightMeasure={Md.$Revenue}
    viewBy={Md.Segment}
    stackBy={Md.ProductLine}
/>

Structure

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { Mekko } from "@gooddata/sdk-ui-charts";

<Mekko
    widthMeasure={<measure>}
    heightMeasure={<measure>}
    viewBy={<attribute>}
    stackBy={<attribute>}
    config={<chart-config>}
    …
/>

Example

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { Mekko } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <Mekko
        widthMeasure={Md.$TotalRevenue}
        heightMeasure={Md.$NrOfOrders}
        viewBy={Md.Region}
        stackBy={Md.Product.Name}
    />
</div>

Props