Delacour Charts — Skia charts for React Native

A headless charting engine for React Native — Skia for drawing, Reanimated for animation, Gesture Handler for touch.

@delacour/react-native-charts draws charts and nothing else. Every colour, font and size is a value you pass in: there is no className, no token and no theme. The skinned Chart in @delacour/react-native-ui is this engine with the theme attached, and it is the one to reach for when you want a chart that already matches the rest of the library.

import { CartesianChart, ChartLine } from "@delacour/react-native-charts";

<CartesianChart data={rows} xKey="day" yKeys={["revenue"]}>
  <ChartLine color="#0A84FF" curve="monotone" yKey="revenue" />
</CartesianChart>;

A chart is a root and the marks you place inside it. The root turns rows into scales, ticks and plotted points and publishes them through a context; a mark reads that context and draws one thing. The same mark also takes its points directly, which is what a render prop hands it. Composition is where those two forms, and the rules for mixing them, are laid out.

The charts

Line

A stroked series. Eleven curves, a time axis, gaps kept as gaps.

Area

The region under a series — flat, a gradient, or stacked bands.

Bar

One series, several side by side, or several stacked. Either way up.

Scatter

A circle, square or star per datum, all in one path.

Candlestick

Open, high, low and close, coloured by sentiment.

Pie

A second root. Slices, a donut hole, a gauge, and a tap.

The parts

Axes and grid

Skia text for the labels, one path for every gridline.

Cursor and scrub

A drag that solves the curve on the UI thread and reports plain numbers.

Animation

Every change morphs. Timing, spring, or none.

Core

The scales, ticks, curves and solvers on their own, with no Skia in the graph.

What is not here

A className. A colour token. A font that ships with the package. A legend, a tooltip view or anything else drawn outside the canvas. Each of those belongs to whatever skins the engine, and the reason it is drawn that way is in the package's own AGENTS.md.

Overview