suiss/ui · Component
Chart
Themed building blocks for Recharts charts, with a shared color config, tooltip and legend.
Chart is an open-source component from suiss/ui for React, React Native, SwiftUI and Jetpack Compose. The @esuiss/ui CLI copies its source into your project, so you own the code.
Chart does not draw charts itself; it styles charts you compose with recharts. A ChartContainer takes a config that maps each data key to a label, an optional icon and a color, and wraps your Recharts chart in a ResponsiveContainer. Inside the chart, use ChartTooltip with content={<ChartTooltipContent />} and ChartLegend with content={<ChartLegendContent />} to render a tooltip and legend that read labels and colors from the config.
Use it for bar, line, area and pie charts in dashboards and reports. Because you work with Recharts directly, every Recharts chart type and prop remains available.
Installation
CLI
Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:
Manual
- Install the dependencies and add the
cnhelper:
- Copy the source into
components/ui/chart.tsx:
- Update the import paths to match your project.
Usage
Each key in config becomes a CSS custom property scoped to the chart, such as --color-desktop. Reference it from your series, as in fill="var(--color-desktop)". Set color for a single value, or theme with light and dark values to switch colors with the .dark class.
For data where each row is its own category, such as a pie chart, put the color in the row (for example fill: "var(--color-safari)") and pass nameKey to ChartLegendContent so labels are looked up by that field.
The container is aspect-video by default; override its size with className, for example aspect-square max-w-72. Enable accessibilityLayer on the Recharts chart to support keyboard navigation.
ChartTooltip, ChartLegend and ChartStyle are also exported; the first two are the Recharts Tooltip and Legend components.
Examples
Multiple series
Two bar series with a legend and a dashed tooltip indicator.
Stacked
Stacks two bar series and hides the tooltip label.
Line series
Two smooth lines with a line tooltip indicator.
Area series
Two stacked, semi-transparent areas.
Donut
A pie chart with an inner radius, colored per row and labelled through nameKey.
API Reference
ChartContainer
Provides the config, injects the color variables and makes the chart responsive.
| Prop | Type | Default | Description |
|---|---|---|---|
config | ChartConfig | Required | Maps data keys to a label, optional icon, and a color or per-theme theme colors. |
children | React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"] | Required | The Recharts chart element to render responsively. |
initialDimension | { width: number height: number } | INITIAL_DIMENSION | Width and height used before the container is measured. Defaults to 320 by 200. |
Also accepts the props of React.ComponentProps<"div">.
ChartTooltipContent
A styled tooltip body that lists each series with its indicator, label and value.
| Prop | Type | Default | Description |
|---|---|---|---|
hideLabel | boolean | false | Hides the tooltip's heading label. |
hideIndicator | boolean | false | Hides the color indicator next to each series. |
indicator | "line" | "dot" | "dashed" | "dot" | Shape of the series indicator: dot, line or dashed. |
nameKey | string | - | Field used to look up each item's config entry instead of its name or data key. |
labelKey | string | - | Field used to look up the heading label in the config. |
Also accepts the props of React.ComponentProps<typeof RechartsPrimitive.Tooltip>, React.ComponentProps<"div">, RechartsPrimitive.DefaultTooltipContentProps< TooltipValueType, TooltipNameType >.
ChartLegendContent
A styled legend that lists series in config order with a swatch or icon.
| Prop | Type | Default | Description |
|---|---|---|---|
hideIcon | boolean | false | Shows a color swatch even when the config entry has an icon. |
nameKey | string | - | Field used to look up each legend item's config entry instead of its data key. |
Also accepts the props of React.ComponentProps<"div">, RechartsPrimitive.DefaultLegendContentProps.
Accessibility
- With
accessibilityLayeron the Recharts chart, the chart is focusable and arrow keys move between data points, showing the tooltip for each. - Charts are visual; provide a nearby summary or table when the exact values matter.
- Do not rely on color alone to tell series apart; the legend and tooltip pair each color with its label.
Notes
- Styling hooks:
data-slot="chart"and a uniquedata-chartid on the container, which scopes the generated--color-*variables. - Config keys and color values containing unsafe characters are skipped when generating CSS.
- The container restyles Recharts defaults, such as grid lines, axis ticks and the tooltip cursor, with the
border,muted-foregroundandmutedcolors. - Tooltip values that are numbers are formatted with
toLocaleString().
Charts are composed declaratively: a chart root such as LineChart, AreaChart, BarChart, ComposedChart, PieChart, RadialBarChart or RadarChart goes inside a ChartContainer, and series and axes such as Line, Area, Bar, XAxis, YAxis and CartesianGrid are added as children. These child components render nothing themselves; the root reads them and draws everything with react-native-svg.
Charts animate in when they first render: bars grow from the baseline, lines draw along their path, areas reveal from left to right, pie and radial sectors sweep open and radar shapes grow from the center. When the data changes, shapes animate from their previous values to the new ones.
Colors are theme tokens, not hex values. A series color such as chart-1, chart-2 or primary resolves to the current token color, so charts follow light and dark mode automatically.
Installation
The CLI also adds what it builds on: Icon, Text.
Manual
-
Target iOS 17 or later.
-
Copy the theme files every view uses:
- Copy the source and every file it uses:
- Add the files to your app target.
- Set
minSdkto 24 or higher and add the dependencies:
- Copy the theme files every view uses:
- Copy the source and every file it uses:
- Update the
com.esuiss.uipackage names to match your project.
Usage
Describe each series in a ChartConfig object with a label, a token color and an optional icon, and pass it to ChartContainer as config. The container is full width with a 16:9 aspect ratio unless you give it an h-, size- or aspect- class.
Add ChartTooltip with content={<ChartTooltipContent />} to make the chart respond to touch: touching or dragging selects the nearest data point, draws a cursor and shows the tooltip, with a selection haptic. ChartTooltipContent supports indicator (dot, line or dashed), hideLabel, hideIndicator, labelFormatter, formatter and nameKey. Use defaultIndex on ChartTooltip to start with a point selected, or onActiveIndexChange on the chart to react to selection.
Line, Area, Bar, Pie, RadialBar and Radar take isAnimationActive, animationDuration and animationEasing. Bars default to 400 ms and curves, sectors and radar shapes to 1500 ms, with ease easing. Set isAnimationActive={false} to draw a series in its final state, for example when its data changes on every interaction.
Add ChartLegend with content={<ChartLegendContent />} for a legend in config order. useChart() returns the config inside a container, and ChartPalette resolves token colors for custom drawing.
Examples
Tooltip line
Tooltip with a line indicator.
Tooltip dashed
Tooltip with a dashed indicator.
Tooltip no indicator
Tooltip with only names and values.
Tooltip no label
Tooltip with the category label hidden.
Tooltip label formatter
A formatted date as the tooltip label.
Tooltip formatter
Custom value formatting with formatter.
Tooltip icons
Config icons in place of color indicators.
Tooltip custom
A fully custom tooltip rendered from a function.
Tooltip interactive
Settings that change the tooltip on a stacked bar chart with a legend.
API Reference
ChartPalette
Resolves token colors to concrete values.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | readonly ChartColor[] | Required | Token colors to resolve. |
children | (palette: Partial<Record<ChartColor, string>>) => React.ReactNode | Required | Function that receives the resolved colors. |
ChartContainer
Sizes the chart and provides the config.
| Prop | Type | Default | Description |
|---|---|---|---|
config | ChartConfig | Required | Series labels, token colors and icons keyed by data key. |
Also accepts the props of ChartPrimitive.ContainerProps.
LineChart
Cartesian chart for Line series.
Also accepts the props of CartesianChartProps.
AreaChart
Cartesian chart for Area series, with optional stacking.
Also accepts the props of CartesianChartProps, ChartPrimitive.RootProps.
BarChart
Cartesian chart for Bar series, vertical or horizontal.
Also accepts the props of CartesianChartProps, ChartPrimitive.RootProps.
ComposedChart
Cartesian chart that mixes lines, areas and bars.
Also accepts the props of CartesianChartProps.
PieChart
Pie and donut charts built from Pie.
Also accepts the props of ChartRootProps, ChartPrimitive.RootProps.
RadialBarChart
Circular bars built from RadialBar.
Also accepts the props of ChartRootProps, ChartPrimitive.RootProps.
RadarChart
Polar chart built from Radar and PolarGrid.
Also accepts the props of ChartRootProps, ChartPrimitive.RootProps.
ChartTooltipContent
Default tooltip card.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Classes for the tooltip card. |
indicator | "line" | "dot" | "dashed" | "dot" | dot, line or dashed. Defaults to dot. |
hideLabel | boolean | false | Hides the category label. |
hideIndicator | boolean | false | Hides the color indicator. |
nameKey | string | - | Data key used to look up series names in the config. |
labelFormatter | ( label: React.ReactNode, payload: ChartPrimitive.TooltipItem[] ) => React.ReactNode | - | Formats the tooltip label. |
formatter | ( value: ChartPrimitive.ChartValue, name: string, item: ChartPrimitive.TooltipItem, index: number, payload: ChartPrimitive.ChartDatum ) => React.ReactNode | - | Renders each row yourself. |
ChartLegendContent
Default legend with swatches or icons.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Classes for the legend row. |
nameKey | string | - | Data key used to look up legend names in the config. |
Accessibility
- The chart is one accessible element labelled with its series names and data range; pass
accessibilityLabeltoChartContainerto override the names. - With a tooltip it has the
adjustablerole: VoiceOver and TalkBack swipe actions step through data points, and the selected values are announced as the value text. - Without a tooltip it has the
imagerole. - With Reduce Motion on, charts skip the enter and update animations and draw in their final state.
Notes
- Series colors accept
chart-1tochart-5, theme colors such asprimary,destructiveandforeground, and palette colors such asgreen-500andred-500; grid and cursor lines useborder. - Value labels from
LabelListand pielabelappear once a series finishes animating. - Light and dark follow the system appearance.