UI component
Chart
Chart wraps Recharts with a config-driven API so line, bar, area, and pie variants render with theme-aware colors, predictable tooltips, and an opt-in empty state.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { Chart, ChartVariant } from '@rapidset/rapidkit';
import type { ChartConfig } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
Line
Bar
Area (stacked)
Pie (donut)
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| type | Selects the chart variant: line, bar, area, or pie via ChartVariant. |
| data | Array of row objects keyed by the x-axis field and each series dataKey. |
| config | Maps each data key to its display label and color so tooltip and legend stay in sync. |
| series | For line, bar, and area variants: which data keys to plot and how they stack. |
| xAxisKey | For cartesian variants: the row field used along the categorical axis. |
| dataKey and nameKey | For the pie variant: the numeric slice value and the slice label fields. |
| showTooltip, showLegend, showGrid | Toggle the standard chart chrome without dropping into Recharts directly. |
| emptyState | Renders custom content when the data array is empty so the layout stays stable. |
Accessibility
The chart surface is exposed with role="img" and an aria-label derived from the variant, so assistive tech can announce its purpose alongside any companion table.
Optional access rules
If you provide access rules, Chart can stay hidden when view access is denied so it never reveals data the viewer should not see.