Proportion · Advanced

Marimekko chart

Two shares at once: width (column share) and height (share within the column).

Open in playground

Use when: Revenue size by channel and device mix in one chart
Avoid when: More than 6 columns or more than 4 series

Try it

Reduce motion

Marimekko chart

Channel sales and device mix (%)

Mobile
Desktop
Tablet

Marimekko chart data
Search · Mobile	58% · 26.1
Search · Desktop	36% · 16.2
Search · Tablet	6% · 2.7
PMax · Mobile	74% · 25.9
PMax · Desktop	22% · 7.7
PMax · Tablet	4% · 1.4
Social · Mobile	88% · 17.6
Social · Desktop	9% · 1.8
Social · Tablet	3% · 0.6

Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.

Code

MarimekkoChart.tsx

import { ChartCard, MarimekkoChart } from "ztd-charts";

const data = [
  {"channel":"Search","device":"Mobile","sales":26.1},
  {"channel":"Search","device":"Desktop","sales":16.2},
  {"channel":"Search","device":"Tablet","sales":2.7},
  {"channel":"PMax","device":"Mobile","sales":25.9},
  {"channel":"PMax","device":"Desktop","sales":7.7},
  {"channel":"PMax","device":"Tablet","sales":1.4},
  // … 3 more rows
];

export function Example() {
  return (
    <ChartCard number="09" title="Marimekko chart" subtitle="Channel sales and device mix (%)" takeaway="Two shares in width and height" level="advanced" replay>
      <MarimekkoChart
        data={data}
        x="channel"
        series="device"
        value="sales"
      />
    </ChartCard>
  );
}

Props

<MarimekkoChart> takes these props. Rows marked Common work the same on every chart.

25 props

Prop	Type	Default	Description
`data`RequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]	object[]	-	An array of objects. Pass CSV, REST or database rows as they are
`x`RequiredColumn fieldstring \| (d, i) => string	string \| (d, i) => string	-	Column field
`series`RequiredStacked series fieldstring \| (d, i) => string	string \| (d, i) => string	-	Stacked series field
`value`RequiredValue fieldstring \| (d, i) => number	string \| (d, i) => number	-	Value field
`height`CommonHeight in px. Without it, each chart picks a default that fits its widthnumber	number	-	Height in px. Without it, each chart picks a default that fits its width
`width`CommonFixed width in px. Without it, the chart fits its parentnumber	number	-	Fixed width in px. Without it, the chart fits its parent
`highlight`CommonItem to highlight. An index, a name, an array, or "max" \| "min" \| "first" \| "last" \| "none"number \| string \| (number\|string)[] \| "max" …	number \| string \| (number\|string)[] \| "max" …	-	Item to highlight. An index, a name, an array, or "max" \| "min" \| "first" \| "last" \| "none"
`format`CommonValue format. "number" \| "integer" \| "percent" (values are already percents: 42 → "42%") \| "ratio" (0.42 → "42%") \| "compact" \| "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) \| "decimal" or Intl.NumberFormat options"number" \| "percent" \| "compact" \| …	"number" \| "percent" \| "compact" \| …	-	Value format. "number" \| "integer" \| "percent" (values are already percents: 42 → "42%") \| "ratio" (0.42 → "42%") \| "compact" \| "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) \| "decimal" or Intl.NumberFormat options
`unit`CommonUnit appended to values. For example "%" or "ms"string	string	-	Unit appended to values. For example "%" or "ms"
`locale`CommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault `"en-US"`	string	"en-US"	Locale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider locale
`animate`CommonEntry and update animationbooleanDefault `true`	boolean	true	Entry and update animation
`duration`CommonAnimation length (ms)number	number	-	Animation length (ms)
`easing`CommonMotion curve"spring" \| "easeOut" \| "easeInOut" \| "linear"Default `"spring"`	"spring" \| "easeOut" \| "easeInOut" \| "linear"	"spring"	Motion curve
`stagger`CommonDelay between items as they enter (ms)number	number	-	Delay between items as they enter (ms)
`reducedMotion`Common"auto" follows the OS setting. true always turns motion offanyDefault `"auto"`	any	"auto"	"auto" follows the OS setting. true always turns motion off
`animateOnView`CommonPlay when the chart scrolls into viewbooleanDefault `true`	boolean	true	Play when the chart scrolls into view
`showLabels`CommonLabels drawn on the chart (values and names)booleanDefault `true`	boolean	true	Labels drawn on the chart (values and names)
`tooltip`CommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault `true`	tooltip	true	Show tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left out
`syncId`CommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring	string	-	Charts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside it
`ariaLabel`CommonName for screen readersstring	string	-	Name for screen readers
`description`CommonDescription for screen readers. Built from the data when omittedstring	string	-	Description for screen readers. Built from the data when omitted
`onHover`CommonRuns when hover or keyboard focus moves to another item(e: ChartEvent \| null) => void	(e: ChartEvent \| null) => void	-	Runs when hover or keyboard focus moves to another item
`onClick`CommonRuns on click, Enter or Space(e: ChartEvent) => void	(e: ChartEvent) => void	-	Runs on click, Enter or Space
`replayKey`CommonReplays the entry animation when it changesstring \| number	string \| number	-	Replays the entry animation when it changes
`theme`CommonChanges theme tokens for this chart onlyPartial<ChartTheme>	Partial<ChartTheme>	-	Changes theme tokens for this chart only

Try it

Code

Props

Also in Proportion