Marimekko Chart

Visualize categorical mix alongside overall weight with a mosaic-style variable-width column chart.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/charts

Examples

⁽⁴⁾

Properties

⁽⁴⁶⁾

Playground

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

Loading demo…

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

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

Loading demo…

import
 
{
 
MarimekkoChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 BUDGET_PLAN 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<MarimekkoChart
      
title
=
"FY26 budget allocation"
      
subtitle
=
"Percentage of total discretionary spend"
      
height
=
{
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)}%)`
}
    
/>
  
)
;
}

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

Loading demo…

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

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

Loading demo…

import
 
{
 
MarimekkoChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 REGIONAL_REVENUE 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<MarimekkoChart
      
title
=
"Revenue mix by region"
      
subtitle
=
"Trailing twelve months"
      
height
=
{
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 phonereact-ui-library.com/components/MarimekkoChart

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap