Marimekko Chart

Two-dimensional stacked chart for visualising categorical data across dual axes.

npm install @plocks/charts

Examples

Properties

Playground

Basics

Variable-width columns reveal how each pipeline channel and region contributes to total qualified pipeline.

Loading demo…

import { MarimekkoChart } from '@plocks/charts';

import { PIPELINE_COMPOSITION } from './data';

export function Demo() {
  return (
    <MarimekkoChart
      title="Pipeline contribution by segment"
      subtitle="Quarter to date"
      h={440}
      data={PIPELINE_COMPOSITION}
      columnGap={16}
      legend={{ show: true, position: 'bottom' }}
      yAxis={{ title: 'Segment share (%)' }}
      grid={{ show: true, style: 'dotted' }}
      categoryLabelFormatter={(category) => category.label}
    />
  );
}

Budget Allocation

Lay out the company plan to see both department budgets and how each team invests within their allocation.

Loading demo…

import { MarimekkoChart } from '@plocks/charts';

import { BUDGET_PLAN } from './data';

export function Demo() {
  return (
    <MarimekkoChart
      title="FY26 budget allocation"
      subtitle="Percentage of total discretionary spend"
      h={420}
      data={BUDGET_PLAN}
      segmentBorderRadius={3}
      legend={{ show: true, position: 'bottom', align: 'center' }}
      yAxis={{ title: 'Share of category (%)' }}
      categoryLabelFormatter={(category) => `${category.label} (${category.segments.reduce((sum, seg) => sum + seg.value, 0)}%)`}
    />
  );
}

Product Portfolio

Compare how revenue mixes across product tiers and sales motions within a single view.

Loading demo…

import { MarimekkoChart } from '@plocks/charts';

import { PRODUCT_MIX } from './data';

export function Demo() {
  return (
    <MarimekkoChart
      title="ARR by product tier and motion"
      subtitle="Current quarter"
      h={460}
      data={PRODUCT_MIX}
      segmentBorderRadius={4}
      legend={{ show: true, position: 'right' }}
      yAxis={{ title: 'Revenue share (%)' }}
      categoryLabelFormatter={(category) => `${category.label}\n(${category.data?.region ?? 'Global'})`}
    />
  );
}

Regional Mix

Explore regional totals and the mix of revenue streams side by side.

Loading demo…

import { MarimekkoChart } from '@plocks/charts';

import { REGIONAL_REVENUE } from './data';

export function Demo() {
  return (
    <MarimekkoChart
      title="Revenue mix by region"
      subtitle="Trailing twelve months"
      h={440}
      data={REGIONAL_REVENUE}
      columnGap={20}
      legend={{ show: true, position: 'bottom', align: 'start' }}
      grid={{ show: true, style: 'dotted' }}
      yAxis={{ title: 'Share within region (%)' }}
    />
  );
}

Scan to open this page on your phoneplocks.dev/charts/MarimekkoChart

Related charts

Stacked Bar Chart

Grouped Bar Chart

Marimekko Chart

Basics

Budget Allocation

Product Portfolio

Regional Mix

Related charts

Further reading

plocks