Charts

The shared chart anatomy and the area, line, stacked bar, stacked track and sparkline plots. Card anatomy follows shadcn; every color is one of the nine approved GoodUnited series.

Figma: 12 / Charts

Pro-Life Advocate

9,420

712 new · 36% of base

Aug 1 – Today · range 8.4k–9.6k

Usage

Source: src/components/charts/chart-parts.tsx, src/components/charts/chart-plots.tsx

import { ChartCard, ChartCardFooter, ChartCardHeader, LegendItem } from '@/components/charts/chart-parts'
import { AreaPlot, LinePlot, StackedBarPlot } from '@/components/charts/chart-plots'

<ChartCard>
    <ChartCardHeader title='Subscriber trends' description='January–June 2026' />
    <LinePlot data={data} xKey='month' lines={lines} />
    <ChartCardFooter summary='Unsubscribes are plotted below zero.' period='June values shown.' />
</ChartCard>

Examples

Card header and footer

Chart/CardHeader: Poppins / text-lg / semibold title and a 14px description, with an optional action. Chart/CardFooter: a medium summary and the reporting period.

Revenue overview

Monthly revenue by source

Jan – Dec 2026

$709,000 across five sources

January to December 2026

Series swatches

Nine approved series, each a vertical gradient from Colors/chart/<series>/start to /end. 12 by 40 with 3px corners.

Platform

Challenges

Facebook

Instagram

Messenger

Birthdays

Other

Negative

Misc

Axis and value labels

Chart/AxisLabel in Roboto / text-sm and Colors/chart/axis-text. Chart/ValueLabel sits on a series: light on dark series, dark on light series.

Jan 2026$40k$24k$8k

Legend item

The same source on the legend and the mark, with an optional show or hide toggle.

Facebook Direct4,90034%

Campaign band

Chart/CampaignBand: the width follows the date range and the band sits behind chart marks.

Area plot

Colors/chart/positive with a soft gradient fill. Hover a point for its value.

Line plot

Channel lines, an optional shaded total and a zero baseline. Negative series plot below zero.

Stacked bar plot

Chart/BarSegment and Chart/StackedBar with campaign bands, value labels and totals. Hover or focus a column for the breakdown.

Stacked track

Normalized shares; the segments always fill 100%.

0%100%

Sparkline

A 112 by 32 trend line in Colors/chart/positive, used in table rows.

When to use

When to reach for it, and when to use something else.

Use it for

Only the nine approved series, and the same series for the same source everywhere.

14px axis labels; 12px only for value labels on marks.

A card header that names the metric and a footer that names the period.

Legends with toggles when a chart has more than three series.

Avoid

New chart colors or flat fills instead of the series gradients.

Pie and donut charts; use the stacked track for shares.

Hiding the zero baseline when negative values are plotted.

API reference

LinePlot

Prop	Type	Default	Description
data	Record<string, string \| number>[]	–	One row per x value.
xKey	string	–	The x value key.
lines	{ key, label, series }[]	–	One line per series.
shadedKey	string	–	Draws that line as a shaded total.
hidden	string[]	–	Keys hidden by the legend.
domain	[number, number]	–	Y axis range.

StackedBarPlot

Prop	Type	Default	Description
data	{ label, values }[]	–	One column per label.
keys	{ key, label, series }[]	–	Segments from bottom to top.
bands	{ label, from, to, row }[]	–	Campaign bands by column index.
max	number	80	Top of the y axis.
format	(value: number) => string	–	Formats axis, value and total labels.

PreviousTreeToggle NextApp layout