Components / Metrics
Series chart
A bar or line chart for one shared series contract.
@fabrials/ui
| Label | Requests | Cost |
|---|---|---|
| Jun | 420 | 18 |
| Jul | 610 | 24 |
| Aug | 540 | 21 |
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { SeriesChart } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
data | record[] | Rows of values. |
xKey | string | Category field. |
series | { key, label }[] | The measures to draw. |
kind | bar | line | Bar for a mix, line for a value over time. |
caption | string | Names the chart for the accessible table. |
Behavior
The legend can hide a series or show only one. An accessible table repeats the values. Decorative sparklines are not this chart.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.