Chart Card
The card around a chart: title, optional headline value and trend, a period segment and legend chips above the plot.
See alsoArea ChartMetric Card
Usage
Installation
Chart Card comes with WunderUI Core and Pro, in the package from your plan. See the plans.
Then import what you need:
import { ChartCard } from "@wunderui/react"Examples
Area
Figma Type=area: title, the period segment top right and one legend chip per series.
Bar
Figma Type=bar-single: one series, the highlighted bar is today.
Line
Figma Type=line: two series, each legend chip in its series colour.
Pie
Figma Type=pie: the narrow card with a description instead of the segment.
Headline value
With value and delta the title becomes the small label above the number, the trend chip sits under it.
Anatomy
The parts the component is made of. Each one renders a you can target from CSS.
- data-slot="chart-card"
The card around a chart: title or small label with an optional headline and trend chip, a period Segment on the right and legend chips above the plot.
Best practices
- When to use
Use ChartCard around any chart that needs a title, headline number or period switch. For a number without a chart use MetricCard.
- Do
Pass and for a headline: the then reads as a small label above the number. Use on when a fall is the good direction.
- Do
Give the same colours as the series, in the same order. Entries default to to , so a custom array needs matching values.
- Do
Handle the period with and , and reload the chart's data in that handler. alone only keeps its own selected state.
- Don’t
Don't add a second heading inside the chart. The card title is the heading; use for the unit or range.
- Don’t
Don't put a ChartCard inside another card. It is already a bordered, shadowed surface at least 320 px wide on larger screens.
API Reference
Theming
The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.