React Native Wagmi Charts: Create Interactive Line and Candlestick Graphs

Description:

React-Native-Wagmi-Charts is a financial graph library that renders animated line and candlestick charts for mobile applications.

It uses React Native Reanimated to execute complex animations directly on the UI thread. This can prevent frame drops and maintain smooth interaction during gestures like panning or zooming.

Features

• 💬 Dynamic Tooltips: Displays data points at specific indices or follows the cursor crosshair.
• 📈 Line & Candlestick Charts: Renders two core chart types for financial data visualization.
• 🏷 Interactive Labels: Includes PriceText and DatetimeText components that update during user interaction.
• 🧱 Composable Design: Exposes a provider-based context system with separate chart elements.
• 🛠 Customizable APIs: Accepts props for colors, sizes, gradients, and tooltip styling.
• ✨ Reanimated: Uses the native thread for performant chart animations.
• 🧈 Gesture Handling: Integrates touch and haptic feedback for cursor movement.

Preview

Use Cases

• Cryptocurrency Tracking Apps: Display Bitcoin or Ethereum price history with interactive tooltips.
• Trading Platforms: Show real-time candlestick charts for stock or forex data.
• Financial Dashboards: Render multiple line charts to visualize portfolio performance.
• Market Analysis Tools: Use highlighting and horizontal lines to mark specific price levels.

How to Use React-Native-Wagmi-Charts

1. Add the React-Native-Wagmi-Charts package to your project.

npm install react-native-wagmi-charts

2. This library relies on specific peer dependencies for animations and gestures. Install them if they are not already present in your project.

npm install react-native-reanimated react-native-gesture-handler react-native-haptic-feedback

3. To build a line chart, wrap your components in LineChart.Provider. This component accepts your data array. Inside the provider, nest the LineChart and LineChart.Path components.

import React from 'react';
import { Dimensions } from 'react-native';
import { LineChart } from 'react-native-wagmi-charts';
const { width } = Dimensions.get('window');
const chartData = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
  { timestamp: 1625948100000, value: 33215.25 },
];
export default function SimpleLineChart() {
  return (
    <LineChart.Provider data={chartData}>
      <LineChart width={width} height={300}>
        <LineChart.Path color="#00ff00" width={3} />
        <LineChart.CursorCrosshair color="#ff0000" />
      </LineChart>
    </LineChart.Provider>
  );
}

4. Candlestick charts follow a similar pattern but require data objects with open, high, low, and close properties. Use CandlestickChart.Candles to render the visual blocks.

import React from 'react';
import { CandlestickChart } from 'react-native-wagmi-charts';
const candleData = [
  { timestamp: 1625945400000, open: 100, high: 110, low: 90, close: 105 },
  { timestamp: 1625946300000, open: 105, high: 115, low: 100, close: 112 },
  { timestamp: 1625947200000, open: 112, high: 120, low: 105, close: 118 },
];
export default function MarketChart() {
  return (
    <CandlestickChart.Provider data={candleData}>
      <CandlestickChart height={300}>
        <CandlestickChart.Candles 
          positiveColor="green" 
          negativeColor="red" 
        />
        <CandlestickChart.Crosshair />
      </CandlestickChart>
    </CandlestickChart.Provider>
  );
}

5. You can display the current value and date by adding text components inside the provider. These components update automatically as the user interacts with the chart.

<LineChart.Provider data={chartData}>
  <LineChart>
    <LineChart.Path />
    <LineChart.CursorCrosshair>
      <LineChart.Tooltip />
    </LineChart.CursorCrosshair>
  </LineChart>
  {/* These update automatically */}
  <LineChart.PriceText precision={2} />
  <LineChart.DatetimeText locale="en-US" />
</LineChart.Provider>

API Reference

LineChart.Provider Props

• data: Array of objects containing timestamp and value.
• yRange: Object with min and max properties to set a custom Y-axis range.
• xDomain: Array [min, max] to scale X values proportionately to time.

LineChart Props

• width: Number. Sets the width of the chart area.
• height: Number. Sets the height of the chart area.
• yGutter: Number. Adds padding to the Y-axis (default: 16).
• shape: Function. Defines the curve shape (e.g., d3-shape curves).

LineChart.Path Props

• color: String. Sets the stroke color of the line.
• width: Number. Sets the stroke width.
• pathProps: Object. Passes props directly to the underlying SVG Path.

LineChart.CursorCrosshair Props

• color: String. Sets the color of the crosshair dot.
• size: Number. Sets the diameter of the inner dot.
• outerSize: Number. Sets the diameter of the outer faded dot.
• snapToPoint: Boolean. Forces the cursor to jump to the nearest data point.
• at: Number. Sets a static index for the cursor.

LineChart.Gradient Props

• color: String. Sets the gradient fill color. Defaults to the path color.

LineChart.Tooltip Props

• textStyle: Object. Customizes the font and appearance of the tooltip text.
• cursorGutter: Number. Sets the distance between the cursor and the tooltip.
• xGutter: Number. Prevents the tooltip from touching the left/right edges.
• yGutter: Number. Prevents the tooltip from touching the top/bottom edges.
• position: String. “top”, “bottom”, “left”, or “right”.

CandlestickChart.Candles Props

• positiveColor: String. Color for candles where close > open.
• negativeColor: String. Color for candles where close < open.
• rectProps: Object. Passes props to the SVG Rect component.
• lineProps: Object. Passes props to the SVG Line component.

Hooks (Available inside Providers)

• LineChart.useChart(): Returns currentX, currentY, currentIndex, isActive, and data.
• LineChart.usePrice({ format, precision }): Returns formatted price strings based on cursor position.
• LineChart.useDatetime({ format, locale, options }): Returns formatted date strings based on cursor position.
• CandlestickChart.useCandleData(): Returns the specific OHLC data for the currently selected candle.

Related Resources

• React Native SVG: The underlying graphics library used to render paths and shapes.
• React Native Reanimated: The animation library that powers the smooth transitions in Wagmi Charts.

FAQs

Q: How do I format the labels differently?
A: You can pass a format worklet function to PriceText or DatetimeText. Because these run on the UI thread, you must mark them with 'worklet' and avoid using external JS scope variables.

Q: Can I synchronize two charts?
A: Yes. You can control the cursor position programmatically by passing the at prop to the cursor component, allowing you to link the state of multiple charts.

Q: Why do I need React Native Gesture Handler?
A: The library uses this package to detect touch events, drags, and long presses for the interactive cursor and tooltips.

Q: How do I format price or date labels?
A: Use the format prop on PriceText or DatetimeText. This function must be a Reanimated worklet. You can also use the precision and locale props for basic formatting.

Changelog

v2.8.3 (12/03/2025)

• Bugfixes