Charts

Five widget components for SaaS dashboards — built on Recharts + Oshon tokens. Series + axis + grid colors derive from your three brand seeds via three-seed theming, so changing your primary color re-tints every chart in a single DOM write.

Quick install

import { WidgetMetric, WidgetDonutChart, WidgetGroupedBarChart, WidgetTrackingItem, WidgetTrendList } from '@oshon-ai/components';

Donut chart

widget-donut-chart

Categorical breakdown with a center label. Slice colors derive from the three-seed palette.

Use for: Plan-tier distribution, traffic source breakdown, deal-stage split.

Grouped bar chart

widget-grouped-bar-chart

Multi-series bars per category. Series colors map to your three brand seeds.

Use for: Revenue by region × quarter, A/B test cohorts, channel performance.

Metric card

widget-metric

Headline number + trend chip + sparkline. The KPI tile most SaaS dashboards open with.

Use for: MRR / ARR / active users / churn rate.

Tracking item

widget-tracking-item

Progress bar + status badge + percent label. Track campaign goals or onboarding completion.

Use for: Quarterly OKR progress, customer onboarding milestones, fundraising targets.

Trend list

widget-trend-list

Sortable list of named items with a per-row sparkline + delta. Compact alternative to a full table.

Use for: Top 10 customers by MRR, most active users this week, fastest-growing accounts.

Theming

Charts read CSS custom properties from @oshon-ai/tokens. Changing your three brand seeds via applyTheme() automatically restyles:

Primary series (default series in single-series charts) → var(--oshon-color-primary-500)
Secondary + tertiary series (multi-series charts) → var(--oshon-color-secondary-500), tertiary-500
Grid + axis lines → var(--oshon-color-neutral-300)
Tooltip surfaces → var(--oshon-color-surface) (auto-inverts in dark mode)

Want a fourth or fifth series color? Pull from any neutral shade or extend the palette in your custom-token bridge — see the Theming page for the full token catalog.

Need a custom chart?

These 5 widgets cover ~80% of SaaS dashboard needs. For custom visualizations — financial candles, geo maps, treemaps, Sankey diagrams — bring Recharts directly into your project and style with the same var(--oshon-color-primary-500) custom properties Oshon uses internally. Our Custom Services tier also includes bespoke chart development if you'd rather have us build them.