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 / ChartsPro-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>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. source adds that source's icon before the label (icon takes any other icon), and onToggle adds show or hide.
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
Complete: Only the nine approved series, and the same series for the same source everywhere.
Complete: 14px axis labels; 12px only for value labels on marks.
Complete: A card header that names the metric and a footer that names the period.
Complete: Legends with toggles when a chart has more than three series.
Avoid
Not complete: New chart colors or flat fills instead of the series gradients.
Not complete: Pie and donut charts; use the stacked track for shares.
Not complete: Hiding the zero baseline when negative values are plotted.
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. |
LegendItem
| Prop | Type | Default | Description |
|---|---|---|---|
| series | ChartSeries | – | The accent color, the same series as the mark. |
| label | string | – | Source name. |
| value | string | – | Formatted value. |
| share | string | – | Share of the total, shown in a soft badge. |
| source | SourceKey | – | Shows that source icon before the label. Use sourceKey(key) to map a data key. |
| icon | ReactNode | – | Any other 16px icon before the label. Wins over source. |
| visible | boolean | true | Dims the card when false. |
| onToggle | () => void | – | Adds the show or hide eye button. |
