Chart
v1.0.0 | View in Storybook Charts are flexible data visualizations with variants (bar, area, line, donut, radar, heat map, sparkline) for surfacing industrial data patterns, trends, and comparisons. They are often used inside a Card but can also be rendered within the parent UI container.When to use
- When users need to compare values over time, across categories, or against thresholds.
- When trends, distributions, or proportions are easier to understand visually than in a table.
- Inside dashboards, monitoring views, or asset detail panels where data density matters.
When to use something else
- When users need to edit or sort raw values, use a Data grid instead.
- For a single KPI or metric without a chart shape, consider Count or Badge.
- For indeterminate loading before data is ready, use Skeleton or Page loader.
Behavior
- Choose the variant that matches the data shape: time series (line/area), comparisons (bar), parts of a whole (donut), multi-axis patterns (radar), density (heat map), or compact inline trends (sparkline).
- Respect theme chart color tokens so series remain legible in light and dark modes.
Often used with
- Card, Count, Tabs for dashboard layouts; Empty state when no data is available.