suiss/uim · React Native Component

Chart

Line, area, bar, pie, radial and radar charts drawn with SVG, with touch tooltips and legends.

Chart is an open-source mobile component from suiss/uim for React Native and Expo, with SwiftUI and Jetpack Compose versions built from the same design tokens. The @esuiss/uim CLI copies its source into your project, so you own the code.

iOS
Chart (tooltip dot) on iOS in light mode

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 blue, teal or accent resolves to the current token color, so charts follow light and dark mode automatically.

Installation

$ pnpm dlx @esuiss/uim@latest add chart

The CLI also adds what it builds on: Icon, Text.

Manual

  1. Install the dependencies:
npx expo install cn phosphor-react-native react-native-svg

  1. Add the pieces it builds on: Icon, Text, and the primitives components/primitives/chart.tsx.

  2. Copy the source into components/ui/chart.tsx:

uniwind/components/ui/chart.tsx
import { cn } from "cn"
import type {
  Icon as PhosphorIcon,
  IconProps as PhosphorIconProps,
} from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import Svg, {
  Circle,
  ClipPath,
  Defs,
  LinearGradient,
  Path,
  Rect,
  Stop,
} from "react-native-svg"
  1. Update the import paths to match your project.

Usage

import { ChartPalette, ChartContainer, LineChart, AreaChart, BarChart, ComposedChart, PieChart, RadialBarChart, RadarChart, ChartTooltipContent, ChartLegendContent } from "@/components/ui/chart"
<StackedTooltipChart
  title="Dot indicator"
  description='indicator="dot"'
  defaultIndex={2}
  content={<ChartTooltipContent indicator="dot" />}
/>

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.

iOS
Chart (tooltip line) on iOS in light mode

Tooltip dashed

Tooltip with a dashed indicator.

iOS
Chart (tooltip dashed) on iOS in light mode

Tooltip no indicator

Tooltip with only names and values.

iOS
Chart (tooltip no indicator) on iOS in light mode

Tooltip no label

Tooltip with the category label hidden.

iOS
Chart (tooltip no label) on iOS in light mode

Tooltip label formatter

A formatted date as the tooltip label.

iOS
Chart (tooltip label formatter) on iOS in light mode

Tooltip formatter

Custom value formatting with formatter.

iOS
Chart (tooltip formatter) on iOS in light mode

Tooltip icons

Config icons in place of color indicators.

iOS
Chart (tooltip icons) on iOS in light mode

Tooltip custom

A fully custom tooltip rendered from a function.

iOS
Chart (tooltip custom) on iOS in light mode

Tooltip interactive

Settings that change the tooltip on a stacked bar chart with a legend.

iOS
Chart (tooltip interactive) on iOS in light mode

API Reference

ChartPalette

Resolves token colors to concrete values.

PropType
About
Token colors to resolve.
Type
readonly ChartColor[]
Default
required
About
Function that receives the resolved colors.
Type
(palette: Partial<Record<ChartColor, string>>) => React.ReactNode
Default
required

ChartContainer

Sizes the chart and provides the config.

ExtendsChartPrimitive.ContainerProps
PropType
About
Series labels, token colors and icons keyed by data key.
Type
ChartConfig
Default
required

LineChart

Cartesian chart for Line series.

ExtendsCartesianChartProps

AreaChart

Cartesian chart for Area series, with optional stacking.

ExtendsCartesianChartPropsChartPrimitive.RootProps

BarChart

Cartesian chart for Bar series, vertical or horizontal.

ExtendsCartesianChartPropsChartPrimitive.RootProps

ComposedChart

Cartesian chart that mixes lines, areas and bars.

ExtendsCartesianChartProps

PieChart

Pie and donut charts built from Pie.

ExtendsChartRootPropsChartPrimitive.RootProps

RadialBarChart

Circular bars built from RadialBar.

ExtendsChartRootPropsChartPrimitive.RootProps

RadarChart

Polar chart built from Radar and PolarGrid.

ExtendsChartRootPropsChartPrimitive.RootProps

ChartTooltipContent

Default tooltip card.

PropType
About
Classes for the tooltip card.
Type
string
Default
—
About
dot, line or dashed. Defaults to dot.
Type
"line""dot""dashed"
Default
"dot"
About
Hides the category label.
Type
boolean
Default
false
About
Hides the color indicator.
Type
boolean
Default
false
About
Data key used to look up series names in the config.
Type
string
Default
—
About
Formats the tooltip label.
Type
( label: React.ReactNode, payload: ChartPrimitive.TooltipItem[] ) => React.ReactNode
Default
—
About
Renders each row yourself.
Type
( value: ChartPrimitive.ChartValue, name: string, item: ChartPrimitive.TooltipItem, index: number, payload: ChartPrimitive.ChartDatum ) => React.ReactNode
Default
—

ChartLegendContent

Default legend with swatches or icons.

PropType
About
Classes for the legend row.
Type
string
Default
—
About
Data key used to look up legend names in the config.
Type
string
Default
—

Accessibility

  • The chart is one accessible element labelled with its series names and data range; pass accessibilityLabel to ChartContainer to override the names.
  • With a tooltip it has the adjustable role: 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 image role.
  • With Reduce Motion on, charts skip the enter and update animations and draw in their final state.

Notes

  • Series colors accept named tokens such as blue, green, teal, accent, success, danger and label; grid and cursor lines use separator.
  • Value labels from LabelList and pie label appear once a series finishes animating.
  • Light and dark follow the system appearance.