# react-native-wagmi-charts: composable candlestick and line charts for React Native

> react-native-wagmi-charts is a TypeScript chart library for React Native that renders line and candlestick charts from a simple data array, with interactive cursors, tooltips and labels assembled from small composable components. It depends on Reanimated, gesture-handler and SVG, and it targets a finance app rather than a dashboard.

**coinjar/react-native-wagmi-charts** — A sweet & simple chart library for React Native that will make us feel like We're All Gonna Make It.

- Repository: https://github.com/coinjar/react-native-wagmi-charts
- Stars: 713 · Forks: 145
- Language: TypeScript
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/coinjar-react-native-wagmi-charts

## Two chart types, built for price data

The library currently comes with two types of charts, line and candlestick, and the README marks more as coming later. That narrowness is the design, not a gap. The name and the shape of the API both come from the trading world: the feature list leads with line charts and candlestick charts, then interactive price and date/time label components, then composability, then highly customizable APIs, then React Native Reanimated under the hood, then data transition animations and interactive tooltips. The component inventory in the table of contents makes it concrete. There is a LineChart.Provider, a LineChart, a LineChart.Path, cursor and crosshair components, a Dot, a Highlight, a HorizontalLine, a Gradient, a DotGrid, a Tooltip, a PriceText, a DatetimeText and a HoverTrap, and a parallel set for candlestick charts with Candles, a Crosshair, a Tooltip, a PriceText and a DatetimeText. Every element of a chart is a component you place yourself, which is the opposite of a chart component that takes a data prop and an options object.

## Provider, composer and path

The architecture is three layers and it is easy to read. The Provider component sets up the context of your chart, the chart component composes the chart elements, and the Path component renders your data in the form of a line path. A minimal line chart therefore looks like this:

```jsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  {
    timestamp: 1625945400000,
    value: 33575.25,
  },
  {
    timestamp: 1625946300000,
    value: 33545.25,
  },
  {
    timestamp: 1625947200000,
    value: 33510.25,
  },
  {
    timestamp: 1625948100000,
    value: 33215.25,
  },
];

function Example() {
  return (
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path />
      </LineChart>
    </LineChart.Provider>
  );
}
```

The data shape is a plain array of objects with a timestamp and a value, and for candles the objects carry open, high, low and close alongside the timestamp. That the data contract is ordinary JSON is a deliberate choice, since it means the chart does not care where the numbers came from. The README is explicit that the basic example does not include an interactive cursor, and points at the interactive cursors guide for that, which tells you the cursor is opt-in rather than built in.

## The dependency chain decides whether you can use it

Installation is a package install plus three peer libraries, and the peers are not optional. The README says WAGMI charts depends on a few peer libraries and to install them if you do not already have them:

```bash
npm install react-native-wagmi-charts
```

```bash
npm install react-native-reanimated react-native-gesture-handler react-native-svg
```

Each peer does a specific job. Reanimated is what the library uses under the hood for the animations and for the data transition effects. Gesture-handler drives the pan gesture that moves a cursor across the chart. SVG provides the drawing surface, which is how the path, the candles, the gradient, the dot grid and the horizontal lines are all rendered. The library's own runtime dependencies are the d3-array, d3-scale and d3-shape packages plus react-native-redash, so the numeric and path-generation work is delegated to d3 rather than reimplemented. The consequence for an adopter is that this is a native dependency package, not a pure JavaScript one, and it cannot be dropped into a project that has ruled out Reanimated.

## Reanimated 3 and Reanimated 4 need different setup

The README spends more words on the Reanimated version than on any chart feature, and that is the practical detail to get right. If you use Reanimated 4, you also install a compatible version of react-native-worklets and follow the Reanimated installation instructions, which for React Native Community CLI projects includes adding react-native-worklets/plugin last in your Babel plugins list and running pod install for iOS. Reanimated 3 users should not install react-native-worklets separately, and should follow the Reanimated 3 setup instructions including react-native-reanimated/plugin instead. The plugin ordering is the part that bites: a Babel plugin that is not last is a build error rather than a runtime bug, and the worklets plugin is a separate package from the Reanimated plugin. The repository's own babel.config.js at the root, and the example app's babel.config.js, are the reference for how the maintainers configure it, and the example directory also contains a metro.config.js and a vite.config.mjs for the two run modes.

## Hooks, and a chart you can drive from your own state

The table of contents lists four hooks for the line chart side and four for the candlestick side: useChart, useDatetime and usePrice for LineChart, and useChart, useCandleData, useDatetime and usePrice for CandlestickChart. These are the escape hatch that makes the composable model pay off. A price label component on the chart needs to know which data point the cursor is over, and a tooltip needs the same, and a crosshair needs the x position. Instead of the library owning that state and exposing props, the components read it through context and the hooks let your own code reach the same information. That is how you build a header above the chart that shows the price of the hovered candle, or a readout that follows the finger, without the library prescribing a layout. It also means the chart is not a black box with a data prop, and the trade-off is that you assemble more of it yourself.

## Web support, and a repository that documents its own size

The table of contents ends with a Web Support section and a Credits section, and the example directory makes the web story concrete, with an index.html, an index.web.js and a vite.config.mjs alongside the native index.js and metro.config.js. The package scripts confirm both targets are first-class, with example:native and example:web commands that run the example app through pnpm workspaces. The package manifest shows the publishing shape, with main pointing at lib/commonjs, module at lib/module, types at lib/typescript, a react-native field pointing at the TypeScript source, and a source field as well, so consumers on Metro consume the raw src while bundler-based consumers get the built output. The build tool is react-native-builder-bob, the workspace is managed with pnpm, and the engine requirement is Node 20.19.4 or later. The example app is the fastest way to see the library working, and it is also the fastest way to find out what the components do before committing to them.

## Where it is the wrong tool, and what the release line says

Two limits are obvious from the feature list. First, there is no bar chart, no area chart, no scatter plot and no pie chart, so a general dashboard library is a different project. Second, the whole surface is optimised for price series over time, which is why the label components are called PriceText and DatetimeText rather than ValueText and AxisLabel. A third limit is operational: the library depends on Reanimated, gesture-handler and react-native-svg, and a project that has already made different choices there will not be able to adopt it. On maintenance, the releases are v3.0.1 on 2026-09-04, v3.0.0 on 2026-08-28 and v2.10.0 on 2026-04-28, and the last push to the repository was on 2026-09-07. A major version bump from 2.10 to 3.0 followed by a patch release within three weeks is the signature of an API break followed by a fix, so a project moving from the 2.x line should read the release notes rather than bump the version and hope.

## Conclusion

react-native-wagmi-charts fits a mobile trading or portfolio app that needs a candlestick chart with a crosshair, a price readout and a timestamp, and where the chart has to feel native rather than be a web chart in a wrapper. It is the wrong tool for analytics dashboards with bar charts, scatter plots or multiple axes, because the library currently comes with two chart types, line and candlestick, and the README marks more as coming later. It is also the wrong tool if you cannot add native peer dependencies, since the install requires Reanimated, gesture-handler and react-native-svg. Verify first which Reanimated major you are on, because the setup differs between Reanimated 3 and 4, and note that the v3.0.0 major release landed on 2026-08-28 with v3.0.1 three weeks later and the last push was on 2026-09-07, so the API you are reading about is recent.

## FAQ

### How do I install react-native-wagmi-charts?

Run npm install react-native-wagmi-charts, then install the peer libraries with npm install react-native-reanimated react-native-gesture-handler react-native-svg if you do not already have them.

### What data shape does a wagmi chart expect?

A plain array of objects with a timestamp and a value for line charts, and with open, high, low and close alongside the timestamp for candlestick charts. The data is passed to the Provider component.

### Do I need react-native-worklets with Reanimated 3?

No. The README says Reanimated 3 users should not install react-native-worklets separately and should follow the Reanimated 3 setup instructions including react-native-reanimated/plugin. For Reanimated 4 you do install a compatible react-native-worklets and add react-native-worklets/plugin last in the Babel plugins list.

### Which chart types does the library support?

The README states the library currently comes with two types of charts, line and candlestick, with more to come. The basic example does not include an interactive cursor, which is covered separately in the interactive cursors guide.

### Does it work on the web as well as on device?

The repository has a Web Support section in its documentation and an example app with index.web.js and a vite.config.mjs alongside the native entry points, and the package scripts include separate example:native and example:web commands.

## Sources

- [coinjar/react-native-wagmi-charts on GitHub](https://github.com/coinjar/react-native-wagmi-charts)
- [Issues](https://github.com/coinjar/react-native-wagmi-charts/issues)
- [License: MIT](https://github.com/coinjar/react-native-wagmi-charts/blob/master/LICENSE)
- [README](https://github.com/coinjar/react-native-wagmi-charts/blob/master/README.md)
- [Releases](https://github.com/coinjar/react-native-wagmi-charts/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/coinjar-react-native-wagmi-charts