Skip to content
Get All-Access
Data & ChartsPro

Stacked Chart

Stacked chart for the parts of a total: stacked and 100 % columns, stacked areas, diverging Likert bars, Marimekko and gapped rows.

Usage

Direct · Dec

$27.0k

Stacked chart, 12 points from Jan to Dec. Direct from $14.0k to $27.0k, lowest $14.0k, highest $27.0k; Organic from $10.0k to $17.0k, lowest $10.0k, highest $17.0k; Referral from $5.0k to $11.0k, lowest $5.0k, highest $11.0k.
Stacked Charts, data table
monthDirectOrganicReferral
Jan$14.0k$10.0k$5.0k
Feb$18.0k$11.0k$7.0k
Mar$16.0k$10.0k$6.0k
Apr$20.0k$14.0k$8.0k
May$19.0k$13.0k$7.0k
Jun$23.0k$15.0k$9.0k
Jul$21.0k$14.0k$8.0k
Aug$25.0k$16.0k$10.0k
Sep$22.0k$15.0k$9.0k
Oct$20.0k$13.0k$8.0k
Nov$24.0k$16.0k$10.0k
Dec$27.0k$17.0k$11.0k

Installation

Stacked Chart comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx
import {
  StackedChart,
  StackedChartProps,
  StackedChartVariant,
} from "@wunderui/react"

Examples

Stacked Bar

Stacked Charts

Stacked chart, 12 points from Jan to Dec. Direct from 14k to 27k, lowest 14k, highest 27k; Organic from 10k to 17k, lowest 10k, highest 17k; Referral from 5k to 11k, lowest 5k, highest 11k.
Stacked Charts, data table
monthDirectOrganicReferral
Jan14k10k5k
Feb18k11k7k
Mar16k10k6k
Apr20k14k8k
May19k13k7k
Jun23k15k9k
Jul21k14k8k
Aug25k16k10k
Sep22k15k9k
Oct20k13k8k
Nov24k16k10k
Dec27k17k11k

Stacked Bar 100

Stacked Charts

Stacked chart, 12 points from Jan to Dec. Direct from 14k to 27k, lowest 14k, highest 27k; Organic from 10k to 17k, lowest 10k, highest 17k; Referral from 5k to 11k, lowest 5k, highest 11k.
Stacked Charts, data table
monthDirectOrganicReferral
Jan14k10k5k
Feb18k11k7k
Mar16k10k6k
Apr20k14k8k
May19k13k7k
Jun23k15k9k
Jul21k14k8k
Aug25k16k10k
Sep22k15k9k
Oct20k13k8k
Nov24k16k10k
Dec27k17k11k

Horizontal Stacked Bar

Stacked Charts

Stacked chart, 7 points from DE to NL. Direct from 26k to 8k, lowest 8k, highest 26k; Organic from 15k to 5k, lowest 5k, highest 15k; Referral from 10k to 3k, lowest 3k, highest 10k.
Stacked Charts, data table
countryDirectOrganicReferral
DE26k15k10k
US23k15k8k
UK20k12k7k
FR17k10k6k
ES14k8k5k
IT11k7k4k
NL8k5k3k

Stacked Area

Stacked Charts

Stacked chart, 12 points from Jan to Dec. Direct from 14k to 27k, lowest 14k, highest 27k; Organic from 10k to 17k, lowest 10k, highest 17k; Referral from 5k to 11k, lowest 5k, highest 11k.
Stacked Charts, data table
monthDirectOrganicReferral
Jan14k10k5k
Feb18k11k7k
Mar16k10k6k
Apr20k14k8k
May19k13k7k
Jun23k15k9k
Jul21k14k8k
Aug25k16k10k
Sep22k15k9k
Oct20k13k8k
Nov24k16k10k
Dec27k17k11k

Stacked Area 100

Stacked Charts

Stacked chart, 12 points from Jan to Dec. Direct from 14k to 27k, lowest 14k, highest 27k; Organic from 10k to 17k, lowest 10k, highest 17k; Referral from 5k to 11k, lowest 5k, highest 11k.
Stacked Charts, data table
monthDirectOrganicReferral
Jan14k10k5k
Feb18k11k7k
Mar16k10k6k
Apr20k14k8k
May19k13k7k
Jun23k15k9k
Jul21k14k8k
Aug25k16k10k
Sep22k15k9k
Oct20k13k8k
Nov24k16k10k
Dec27k17k11k

Stacked Gradient Bar

Stacked Charts

Stacked chart, 12 points from Jan to Dec. Direct from 14k to 27k, lowest 14k, highest 27k; Organic from 10k to 17k, lowest 10k, highest 17k; Referral from 5k to 11k, lowest 5k, highest 11k.
Stacked Charts, data table
monthDirectOrganicReferral
Jan14k10k5k
Feb18k11k7k
Mar16k10k6k
Apr20k14k8k
May19k13k7k
Jun23k15k9k
Jul21k14k8k
Aug25k16k10k
Sep22k15k9k
Oct20k13k8k
Nov24k16k10k
Dec27k17k11k

Diverging Stacked Bar

Stacked Charts

Stacked chart, 7 points from Onboarding to Mobile app. Strongly disagree from 6% to 14%, lowest 6%, highest 14%; Disagree from 14% to 20%, lowest 10%, highest 20%; Neutral from 12% to 12%, lowest 10%, highest 18%; Agree from 52% to 46%, lowest 30%, highest 52%; Strongly agree from 16% to 8%, lowest 8%, highest 35%.
Stacked Charts, data table
topicStrongly disagreeDisagreeNeutralAgreeStrongly agree
Onboarding6%14%12%52%16%
Docs12%16%10%38%24%
Pricing8%10%14%36%32%
Support10%14%12%50%14%
Performance7%10%18%30%35%
Integrations9%16%14%52%9%
Mobile app14%20%12%46%8%

Marimekko

Stacked Charts

Stacked chart, 5 points from EMEA · 34% to Other · 5%. Core from 13.3% to 2.2%, lowest 2.2%, highest 13.3%; Pro from 11.6% to 1.6%, lowest 1.6%, highest 11.6%; Enterprise from 6.1% to 0.9%, lowest 0.9%, highest 7.5%; Add-ons from 3.1% to 0.4%, lowest 0.4%, highest 3.3%.
Stacked Charts, data table
regionCoreProEnterpriseAdd-ons
EMEA · 34%13.3%11.6%6.1%3.1%
North America · 29%8.7%9.9%7.5%2.9%
APAC · 22%6.8%7.5%4.4%3.3%
LatAm · 10%3.7%2.3%2.8%1.2%
Other · 5%2.2%1.6%0.9%0.4%

Gapped Horizontal Stacked Bar

Stacked Charts

Stacked chart, 7 points from Week 1 to Week 7. Search from 18 to 27, lowest 18, highest 28; Social from 14 to 17, lowest 14, highest 21; Email from 16 to 24, lowest 16, highest 25; Direct from 22 to 22, lowest 22, highest 26.
Stacked Charts, data table
weekSearchSocialEmailDirect
Week 118141622
Week 225191926
Week 321152222
Week 428202526
Week 524161822
Week 620212126
Week 727172422

State – Loading

Stacked Charts

Stacked chart, 12 points from Jan to Dec. Direct from 14k to 27k, lowest 14k, highest 27k; Organic from 10k to 17k, lowest 10k, highest 17k; Referral from 5k to 11k, lowest 5k, highest 11k.

State – Hover

Stacked Charts

Stacked chart, 12 points from Jan to Dec. Direct from 14k to 27k, lowest 14k, highest 27k; Organic from 10k to 17k, lowest 10k, highest 17k; Referral from 5k to 11k, lowest 5k, highest 11k.
Stacked Charts, data table
monthDirectOrganicReferral
Jan14k10k5k
Feb18k11k7k
Mar16k10k6k
Apr20k14k8k
May19k13k7k
Jun23k15k9k
Jul21k14k8k
Aug25k16k10k
Sep22k15k9k
Oct20k13k8k
Nov24k16k10k
Dec27k17k11k

State – Legend Toggled

Stacked Charts

Stacked chart, 12 points from Jan to Dec. Direct from 14k to 27k, lowest 14k, highest 27k; Organic from 10k to 17k, lowest 10k, highest 17k; Referral from 5k to 11k, lowest 5k, highest 11k.
Stacked Charts, data table
monthDirectOrganicReferral
Jan14k10k5k
Feb18k11k7k
Mar16k10k6k
Apr20k14k8k
May19k13k7k
Jun23k15k9k
Jul21k14k8k
Aug25k16k10k
Sep22k15k9k
Oct20k13k8k
Nov24k16k10k
Dec27k17k11k

State – Selected Range

Stacked Charts

Stacked chart, 12 points from Jan to Dec. Direct from 14k to 27k, lowest 14k, highest 27k; Organic from 10k to 17k, lowest 10k, highest 17k; Referral from 5k to 11k, lowest 5k, highest 11k.
Stacked Charts, data table
monthDirectOrganicReferral
Jan14k10k5k
Feb18k11k7k
Mar16k10k6k
Apr20k14k8k
May19k13k7k
Jun23k15k9k
Jul21k14k8k
Aug25k16k10k
Sep22k15k9k
Oct20k13k8k
Nov24k16k10k
Dec27k17k11k

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Requests by Status Code

Edge network requests stacked by status code per two hours; the legend switches classes off.

Requests by status code

Edge network, last 24 hours

Stacked chart, 12 points from 00:00 to 22:00. 2xx from 4.2k to 5k, lowest 4.2k, highest 6.4k; 3xx from 600 to 921, lowest 600, highest 921; 4xx from 220 to 387, lowest 220, highest 387; 5xx from 40 to 63, lowest 40, highest 97.
Requests by status code, data table
hour2xx3xx4xx5xx
00:004.2k60022040
02:004.9k81131793
04:005.7k62223476
06:006.4k83333159
08:004.7k64424842
10:005.5k85534595
12:006.2k66626278
14:004.5k87735961
16:005.2k68827644
18:006k89937397
20:004.3k71029080
22:005k92138763

Plan Mix 100 %

Share of MRR by plan per month.

Plan mix

Share of MRR by plan

Stacked chart, 12 points from Jan to Dec. Starter from 42% to 27%, lowest 27%, highest 42%; Pro from 38% to 45%, lowest 38%, highest 45%; Team from 20% to 28%, lowest 20%, highest 28%.
Plan mix, data table
monthStarterProTeam
Jan42%38%20%
Feb41%38%21%
Mar39%39%22%
Apr38%40%22%
May36%41%23%
Jun35%41%24%
Jul33%42%25%
Aug32%43%25%
Sep31%43%26%
Oct30%44%26%
Nov28%45%27%
Dec27%45%28%

Tickets by Channel

Support tickets per week stacked by channel, next to the agent list.

Tickets by channel

Stacked chart, 8 points from W35 to W42. Email from 120 to 139, lowest 120, highest 171; Chat from 90 to 153, lowest 90, highest 153; Phone from 40 to 69, lowest 40, highest 69.
Tickets by channel, data table
weekEmailChatPhone
W351209040
W3615711957
W3713414844
W3817110761
W3914813648
W401259565
W4116212452
W4213915369

Agents

Tickets solved this week

  • Alina LorenzAvg. reply 2m 10s
    64tickets
  • Felix BrandtAvg. reply 2m 42s
    58tickets
  • Mara JensenAvg. reply 3m 05s
    51tickets

Anatomy

The parts the component is made of. Each one renders a you can target from CSS.

  • data-slot="chart-active"

API Reference

PropTypeDefault
variant"stacked-bar" | "stacked-bar-100" | "horizontal-stacked-bar" | "stacked-area" | "stacked-area-100" | "stacked-gradient-bar" | "diverging-stacked-bar" | "marimekko" | "gapped-horizontal-stacked-bar""stacked-bar"
dataRecord<string, unknown>[]—
indexstring—
series{ key, label?, color?, dashed? }[]—
heightnumber434
state"ready" | "loading" | "empty" | "error""ready"
labelstring—
valueFormatter(v: number) => string42000 → 42k
hiddenSeriesstring[]—
activeIndex / defaultActiveIndexnumber | null—
selectedRange / onSelectedRangeChange[number, number] | null—
tooltipbooleantrue
animatebooleantrue
onRetry() => void—
negativeCount · showSegmentLabelsvariant options—
activeIndexnumber | null—
animationKeystring | number—
axisFormatterChartValueFormatter—
barWidthnumber—
categoryAxisboolean—
categoryFormatter(label: string) => string—
categoryTicksreadonly string[]—
classNamestring—
defaultActiveIndexnumber | null—
defaultSelectedRangeChartRange | null—
descriptionstring—
emptyDescriptionstring—
emptyTitlestring—
errorDescriptionstring—
errorTitlestring—
gridboolean—
gridIntervalsnumber—
gridStyle"solid" | "dashed"—
includeZeroboolean—
negativeCountnumber—
onActiveIndexChange(index: number | null) => void—
onSelectedRangeChange(range: ChartRange | null) => void—
rangeSelectableboolean—
segmentGapnumber—
selectedRangeChartRange | null—
showSegmentLabelsbooleantrue
tooltipTitle(datum: ChartDatum, index: number) => React.ReactNode—
valueAxisboolean—
valueAxisSide"left" | "right"—
valueDomainreadonly [number, number]—
valueTicksreadonly number[]—
widthnumber—

Theming

The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.

VariableUsed forDefault
Color
Stroke#FFFFFFdark #1C1D20
Motion
Duration250ms
Easingcubic-bezier(0.22, 1, 0.36, 1)
PreviousSparklineNextStatus Tracker