react-native-pure-chart

Charts built from nothing but <View> and <Text>. Zero dependencies. No native modules. No SVG, no Skia.

react-native-pure-chart draws every axis, line, bar and pie slice with plain React Native core components — rotated Views with transformOrigin, circular clipping, and the Animated API. Nothing to link, nothing to compile.

Why pure?

• npm install and you're done. No pod install, no config plugin, no native linking — works in Expo Go, bare RN, and react-native-web.
• Survives every React Native upgrade. Only core components are used, so there is no native module to break on the next RN release.
• New Architecture native. Built for RN 0.76+ / Fabric; animations run on the native driver (transform/opacity only).

Quick start

import { LineChart } from 'react-native-pure-chart';

<LineChart data={[30, 200, 170, 250, 10]} />;

That's a full chart: width fills the parent, nice-number ticks, compact 1.2K-style labels, and a 500 ms entrance animation — all defaults.

Installation

npm install react-native-pure-chart
# or
yarn add react-native-pure-chart

Requires React Native 0.73+ (for transformOrigin). No other setup.

---

Gallery

Every image below is a real screenshot from example/ on an iOS simulator — the code under each one is what produced it.

Line charts

Multi-series + legend <LineChart data={revenue} height={200} />	Smooth curve + area fill <LineChart data={traffic} curve="monotone" area />
Step curve, thick, no dots <LineChart data={traffic} curve="step" strokeWidth={3} showDataPoints={false} />	null values break the line <LineChart data={[50, null, null, 90, 40, 70, 20, 60]} />
Custom value labels <LineChart data={traffic} curve="monotone" renderValueLabel={(e) => <Pill value={e.value} />} />	Built-in tooltip + guide line // tap, or drive it yourself <LineChart data={revenue} selectedIndex={3} />

Bar charts

Grouped <BarChart data={platforms} barRadius={5} />	Stacked <BarChart data={platforms} stacked barRadius={5} />
Horizontal <BarChart data={monthly} horizontal barRadius={5} />	Negative values <BarChart data={[12, -8, 25, -15, 30, 5]} barRadius={5} />
Selection dims the rest <BarChart data={platforms} selectedIndex={2} />	Stacked + horizontal + dark <BarChart data={platforms} stacked horizontal theme="dark" />

Pie & donut

Pie + legend <PieChart data={budget} size={200} />	Donut + center label <PieChart data={budget} innerRadius="60%" renderCenterLabel={() => <Total />} />
On-slice labels + padAngle <PieChart data={budget} padAngle={2} sliceLabel="percentage" />	Dark donut <PieChart data={budget} innerRadius="60%" theme="dark" />

Dark mode

One prop. Pass useColorScheme() straight through and every axis, grid line, label and tooltip flips with it.

import { useColorScheme } from 'react-native';

const scheme = useColorScheme();

<LineChart data={revenue} theme={scheme === 'dark' ? 'dark' : 'light'} />;

---

API

Runtime exports: LineChart, BarChart, PieChart, DEFAULT_PALETTE, formatCompact. Every prop and payload type is exported too (LineChartProps, PressEvent, ChartTheme, …).

Data

type ChartData =
  | readonly (number | null | DataPoint)[] // one series
  | readonly Series[]; // many

interface DataPoint {
  value: number | null; // null = missing
  label?: string; // x-axis label
  color?: string; // per-point override
  extra?: unknown; // returned untouched in press events
}

interface Series {
  data: readonly (number | null | DataPoint)[];
  name?: string; // legend + tooltip
  color?: string; // defaults to palette[seriesIndex]
}

Numbers, nulls and DataPoint objects can be mixed freely in one array. Pie charts take PieSliceDatum[] — { value, label?, color?, extra? }.

Colors

Nothing is hard-coded. Colors come from four levels, most specific first:

// 1. the whole chart — replaces the auto-assigned palette
<BarChart data={data} palette={['#FF6B6B', '#4ECDC4', '#FFD93D']} />

// 2. one series / one pie slice
<LineChart data={[{ name: 'Sales', data: [30, 90, 50], color: '#FF6B6B' }]} />
<PieChart data={[{ value: 50, label: 'Marketing', color: '#FF6B6B' }]} />

// 3. one bar — highlight a single value
<BarChart data={[30, { value: 90, color: '#FF6B6B' }, 50]} />

// 4. line dots, independently of the line
<LineChart data={data} showDataPoints={{ color: '#111827', radius: 5 }} />

The palette cycles when there are more series than colors, so it never runs out. Extend the built-in one instead of retyping it:

import { DEFAULT_PALETTE } from 'react-native-pure-chart';

<BarChart data={data} palette={['#FF6B6B', ...DEFAULT_PALETTE]} />;

Two limits worth knowing: a per-point color applies to grouped and single-series bars only — stacked segments take the series color — and line segments always use the series color, so a single point can't recolor the line it sits on. Axis, grid, label and tooltip colors are not part of the palette; they come from theme.

LineChart

Prop	Type	Default	Description
data	ChartData	—	Numbers, {value, label} objects, or an array of series
strokeWidth	number	2	Line thickness (no upper limit)
curve	'linear' | 'step' | 'monotone'	'linear'	'monotone' draws a smooth curve that never overshoots the data
area	boolean | {opacity}	false	Fill between the line and the zero baseline (default opacity 0.15)
showDataPoints	boolean | {radius, color}	true	Point markers. Default radius max(3, strokeWidth * 1.5)
missingValues	'break' | 'interpolate' | 'zero'	'break'	How null values are treated
spacing	number	auto	Exact px between points. Auto mode fills the width, but never squeezes below 40px — the chart grows and scrolls instead
scrollable	boolean	true	Horizontal scroll when content overflows
initialScroll	'start' | 'end'	'start'	Initial scroll position
legend	boolean | LegendOptions	auto	Shown when there are 2+ series and at least one is named
tooltip	boolean | TooltipOptions	true	Built-in tooltip + selection guide
onPointPress	(e: PressEvent) => void	—	Tap on the chart (nearest point wins)
selectedIndex / onSelectionChange	number | null	—	Controlled selection
renderDataPoint	(e: PressEvent) => ReactNode	—	Replace point markers
renderValueLabel	(e: PressEvent) => ReactNode	—	Always-visible label above points
xAxis / yAxis	see Axes	—	Ticks, grid, formatters

BarChart

Prop	Type	Default	Description
data	ChartData	—	Same shapes as LineChart
barWidth	number	auto	Bar width. Auto mode fills the width, but grows and scrolls instead of rendering sliver bars for many categories
barRadius	number	4	Corner radius on the value end
barGap	number	2	Gap between bars in a group
groupGap	number	auto	Gap between categories
stacked	boolean	false	Stack multi-series values (positives up, negatives down)
horizontal	boolean	false	Horizontal bars (yAxis still configures the value axis)
legend	boolean | LegendOptions	auto	Same rule as LineChart
scrollable / initialScroll		true / 'start'	Vertical bars only — horizontal bars always fit their height
tooltip	boolean | TooltipOptions	true	Selection also dims the other categories
onPointPress / selectedIndex / onSelectionChange			Same as LineChart
renderValueLabel	(e: PressEvent) => ReactNode	—	Label above each bar
xAxis / yAxis	see Axes	—	yAxis is always the value axis

Negative values are supported — bars grow down from the zero baseline, and stacks split at it.

PieChart

Prop	Type	Default	Description
data	PieSliceDatum[]	—	{value, label?, color?, extra?} per slice
size	number	200	Diameter in px
innerRadius	number | '60%'	0	Donut hole — px, or a % of the radius
holeColor	string	theme background	Hole fill (opaque — see Limitations)
startAngle	number	0	Degrees clockwise from 12 o'clock
padAngle	number	0	Gap between slices in degrees
sliceLabel	'none' | 'label' | 'value' | 'percentage' | (e) => string	'none'	On-slice labels
legend	boolean | LegendOptions	true	Lists every labeled slice
focusOnPress	boolean	true	Tapped slice slides outward
onSlicePress	(e: SlicePressEvent) => void	—	Tap on a slice
selectedIndex / onSelectionChange	number | null	—	Controlled selection
renderCenterLabel	(selected: SlicePressEvent | null) => ReactNode	—	Donut center content

PieChart sizes itself with size — it does not take width, height or padding.

Common props

Every chart accepts:

Prop	Type	Default	Description
width	number	parent width	Measured with onLayout when omitted
height	number	220	Plot height (pies use size)
padding	number | {top, right, bottom, left}	{top: 12, right: 12, bottom: 0, left: 0}	Inner padding of the plot area
palette	string[]	built-in 10 colors	Auto-assigned series/slice colors — exported as DEFAULT_PALETTE
theme	'light' | 'dark' | ChartTheme	'light'	Pass useColorScheme() output directly
animate	boolean | AnimationConfig	true	{duration, delay, easing, type: 'grow' | 'fade' | 'none'}
style, testID, accessibilityLabel			Standard RN props (a11y label auto-generated)

The default entrance (type: 'grow') is chart-aware: lines draw left to right, bars grow from the baseline with a stagger, pies sweep clockwise. One Animated.Value drives the whole chart on the native driver.

Axes

yAxis configures the value axis (including on horizontal bars), xAxis the category axis.

YAxisOptions	Type	Default
show	boolean	true
tickCount	number	5
min / max	number	nice-number bounds from the data
formatLabel	(value, index) => string	formatCompact
showGridLines	boolean	true
gridLineStyle	'solid' | 'dashed'	'dashed'
showAxisLine	boolean	false
position	'left' | 'right'	'left' (ignored by horizontal bars)
labelStyle	TextStyle	—

XAxisOptions	Type	Default
show	boolean	true (auto-hidden when no point has a label)
interval	number | 'auto'	'auto' — thins labels to fit the width
formatLabel	(label, index) => string	identity
showAxisLine	boolean	true
showGridLines	boolean	false
labelStyle	TextStyle	—

Theme, legend, tooltip, events

interface ChartTheme {
  gridColor?: string;
  axisColor?: string;
  labelColor?: string;
  tooltipBackgroundColor?: string;
  tooltipTextColor?: string;
  /** Only used as the donut hole fill — charts never paint their background. */
  backgroundColor?: string;
}

interface LegendOptions {
  position?: 'top' | 'bottom'; // default 'bottom'
  labelStyle?: TextStyle;
}

interface TooltipOptions {
  render?: (e: PressEvent) => ReactNode; // replace it entirely
  formatValue?: (value: number) => string; // default formatCompact
  dismissOnTapOutside?: boolean; // default true
}

interface PressEvent {
  point: DataPoint;
  value: number | null;
  label?: string;
  index: number; // index within the series
  seriesIndex: number;
  seriesName?: string;
  position: { x: number; y: number }; // px, relative to the chart
}

interface SlicePressEvent {
  slice: PieSliceDatum;
  index: number;
  value: number;
  percentage: number; // 0..1
}

---

Guides

Handling missing data

null values are first-class citizens in line charts:

• 'break' (default) — the line is interrupted, like recharts' connectNulls={false}. An isolated point still gets its dot.
• 'interpolate' — gaps are bridged linearly; synthetic points get no markers
• 'zero' — nulls are treated as 0

Bars always render null as an empty slot (the category label remains).

Controlled selection

Omit selectedIndex and the chart manages selection itself. Pass it and you own it — useful for syncing a chart with an external list:

const [selected, setSelected] = useState<number | null>(null);

<BarChart
  data={data}
  selectedIndex={selected}
  onSelectionChange={setSelected}
  onPointPress={(e) => console.log(e.seriesName, e.label, e.value)}
/>;

Custom tooltips

<BarChart
  data={data}
  tooltip={{
    render: (e) => (
      <View style={styles.tip}>
        <Text>
          {e.seriesName}: {e.value}
        </Text>
      </View>
    ),
  }}
/>

Axis formatting

formatCompact (exported) is the default y-axis formatter: 1234 → '1.2K', 2500000 → '2.5M'. Compose it for currencies or percentages:

import { formatCompact } from 'react-native-pure-chart';

<LineChart
  data={revenue}
  yAxis={{ tickCount: 4, formatLabel: (v) => `$${formatCompact(v)}` }}
  xAxis={{ interval: 2 }}
/>;

Many points

Auto sizing never crams points closer than 40px (or bars thinner than 12px). Past that the chart grows wider than its viewport and scrolls horizontally, with the y-axis labels staying put. Set scrollable={false} to squeeze everything into the width instead, or initialScroll="end" to open on the most recent data.

Limitations

Honesty section — the price of the zero-dependency concept:

• Smooth curves cost Views. curve="monotone" approximates the curve with short line segments (budgeted at ~400 per series). For very dense series prefer 'linear'.
• Donut holes are opaque. The hole is a colored circle overlay, so donuts don't work on top of images/gradients. Set holeColor to match your background.
• Large datasets: each point/segment is a View. A few hundred points are fine; for thousands of points use an SVG- or Skia-based library instead.

Migrating from 0.x

Version 2 is a complete rewrite with no backward compatibility. The old <PureChart type="..." /> component is gone — import charts directly:

0.x	2.x
<PureChart type="line" />	<LineChart />
<PureChart type="bar" />	<BarChart />
<PureChart type="pie" />	<PieChart />
data={[{x, y}]}	data={[{value, label}]}
data={[{seriesName, data, color}]}	data={[{name, data, color}]}
gap	spacing
lineThickness (max 10)	strokeWidth (unlimited)
numberOfYAxisGuideLine	yAxis={{ tickCount }}
yAxisSymbol	yAxis={{ formatLabel }}
showXAxisLabel / showYAxisLabel	xAxis={{ show }} / yAxis={{ show }}
showEvenNumberXaxisLabel	xAxis={{ interval }}
initialScrollPosition + initialScrollTimeOut	initialScroll: 'start' | 'end'
onPress(index)	onPointPress(event) — full event object
customValueRenderer	renderValueLabel
defaultColumnWidth / defaultColumnMargin	barWidth / groupGap
primaryColor / colors	Series.color / palette

Development

npm install          # library dev deps
npm test             # unit tests for the core + component tests
npm run typecheck

cd example && npm install
npm start            # gallery app against the local ../src (live editing)
npm run start:npm    # gallery app against the published npm package

The example/ app is a gallery of every chart variant, including artifact stress tests (1° pie slices, high-contrast neighbors, missing data). It runs in two modes: npm start resolves the library from ../src for live development, while npm run start:npm resolves the version installed from npm — use it to smoke-test a release exactly as consumers get it. example/screens/ShotScreen.tsx is the reproducible source of every image in docs/ — flip SHOT_MODE in example/App.tsx, pick a group, screenshot.

License

MIT