Cardparent
Charts are typically placed inside CardsChart
Composable chart wrapper for recharts with theme-aware tooltips, legends, and color integration.
Setup
import { Chart } from '@fragments-sdk/ui';Examples
Line Chart
Multi-series line chart showing trends over time
Loading preview...
Bar Chart
Categorical bar chart comparing device sessions
Loading preview...
Area Chart
Filled area chart showing revenue trend
Loading preview...
Pie Chart
Donut chart showing browser share distribution
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
configRequired | object | Not set | ChartConfig mapping data keys to labels/colors (optional icon per series) |
childrenRequired | element | Not set | A recharts chart component (LineChart, BarChart, etc.) |
summary | string | Not set | Non-visual summary announced to assistive technology users |
dataTable | node | Not set | Optional accessible data table or textual fallback |
style | object | Not set | — |
Usage Guidelines
When to use
- Displaying data trends over time
- Comparing categorical data
- Showing distribution or composition
- Dashboard data visualizations
When not to use
- Simple numeric values (use Text or Badge)
- Progress toward a goal (use Progress)
- Tabular data without visualization (use Table)
Best practices
- Use ChartContainer to wrap recharts chart components
- Define a ChartConfig to map data keys to labels and colors (and optionally icons for custom legend/tooltip UIs)
- Use FUI CSS variables for colors so charts adapt to theme changes
- Use ChartTooltip and ChartLegend for consistent themed overlays
- ChartTooltip and ChartLegend accept custom content renderers for advanced formatting
Accessibility
- Charts include recharts accessibilityLayer by default
- Provide meaningful labels in ChartConfig for screen readers
- Consider providing a data table alternative for complex charts