react-native-wagmi-charts

The example project demonstrates two primary chart types:

• Candlestick Chart
• Line Chart

The charts in the example use hardcoded sample data located in the src/data directory of the example project.

Candlestick charts follow a similar provider-consumer pattern to line charts.

1. CandlestickChart.Provider: Sets up the data context using a data prop.
2. CandlestickChart: Composes the chart elements.
3. CandlestickChart.Candles: Renders the data in the form of candlestick shapes.

Data for a Candlestick Chart must be an array of objects containing timestamp, open, high, low, and close keys.

import { CandlestickChart } from 'react-native-wagmi-charts';

const data = [
  {
    timestamp: 1625945400000,
    open: 33575.25,
    high: 33600.52,
    low: 33475.12,
    close: 33520.11,
  },
  // ...
];

function Example() {
  return (
    <CandlestickChart.Provider data={data}>
      <CandlestickChart>
        <CandlestickChart.Candles />
      </CandlestickChart>
    </CandlestickChart.Provider>
  );
}

Line charts are built using a provider-consumer pattern to manage data context.

1. LineChart.Provider: Sets up the data context for the chart using a data prop.
2. LineChart: Composes the various chart elements (path, cursor, tooltip, etc.).
3. LineChart.Path: Renders the actual data points as a line path.

Data for a Line Chart should be an array of objects containing timestamp and value keys.

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

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  // ...
];

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

To explore the library's capabilities, you can run the included example project. It supports iOS, Android, and Web platforms. It is recommended to use pnpm for dependency installation, but npm is also supported.

# Using pnpm (recommended)
pnpm install
pnpm run ios
pnpm run android
pnpm run web

# Using npm
npm install
npm run ios
npm run android
npm run web

You can render interactive labels using PriceText and DatetimeText.

Important: These components must be children of the CandlestickChart.Provider component to access the chart data.

<CandlestickChart.Provider data={data}>
  <CandlestickChart>
    <CandlestickChart.Candles />
    <CandlestickChart.Crosshair />
  </CandlestickChart>
  <CandlestickChart.PriceText type="open" />
  <CandlestickChart.PriceText type="high" />
  <CandlestickChart.PriceText type="low" />
  <CandlestickChart.PriceText type="close" />
  <CandlestickChart.DatetimeText />
</CandlestickChart.Provider>

To display price or date/time information that updates as the cursor moves, use LineChart.PriceText or LineChart.DatetimeText.

Important: These components must be children of the LineChart.Provider component, but they do not need to be inside the LineChart component itself.

<LineChart.Provider data={data}>
  <LineChart>
    <LineChart.Path />
    <LineChart.CursorCrosshair />
  </LineChart>
  <LineChart.PriceText />
  <LineChart.DatetimeText />
</LineChart.Provider>

Dots

Render specific points on the chart using LineChart.Dot. You can specify the index with the at prop and add an animated pulse effect using the hasPulse prop.

Path Highlighting

Highlight a specific range of the path using LineChart.Highlight by providing from and to indices.

// Dots
<LineChart.Path>
  <LineChart.Dot color="red" at={10} hasPulse />
</LineChart.Path>

// Highlighting
<LineChart.Path>
  <LineChart.Highlight color="red" from={10} to={15} />
</LineChart.Path>

To render an interactive cursor (crosshair) on a candlestick chart, include the CandlestickChart.Crosshair component inside the CandlestickChart component.

<CandlestickChart.Provider data={data}>
  <CandlestickChart>
    <CandlestickChart.Candles />
    <CandlestickChart.Crosshair />
  </CandlestickChart>
</CandlestickChart.Provider>

You can use the Tooltip component to render a "static" tooltip at a specific data index by providing the at prop. Note that this tooltip will disappear if the user interacts with the chart using a cursor.

<LineChart.Provider data={data}>
  <LineChart>
    <LineChart.Path>
      <LineChart.Tooltip at={3} />
    </LineChart.Path>
  </LineChart>
</LineChart.Provider>

To render a tooltip that follows the crosshair, place the CandlestickChart.Tooltip component inside the CandlestickChart.Crosshair component.

<CandlestickChart.Provider data={data}>
  <CandlestickChart>
    <CandlestickChart.Candles />
    <CandlestickChart.Crosshair>
      <CandlestickChart.Tooltip />
    </CandlestickChart.Crosshair>
  </CandlestickChart>
</CandlestickChart.Provider>

You can trigger haptic feedback by using the onCurrentXChange event handler on the CandlestickChart.Crosshair component. This event fires as the user moves the cursor across the X-axis.

import * as haptics from 'expo-haptics';

const data = [...];

function invokeHaptic() {
  haptics.impactAsync(haptics.ImpactFeedbackStyle.Light);
}

function Example() {
  return (
    <CandlestickChart.Provider data={data}>
      <CandlestickChart>
        <CandlestickChart.Candles />
        <CandlestickChart.Crosshair onCurrentXChange={invokeHaptic}>
          <CandlestickChart.Tooltip />
        </CandlestickChart.Crosshair>
      </CandlestickChart>
    </CandlestickChart.Provider>
  )
}