Sweet Chart Library For React Native – wagmi-charts

wagmi-charts is a simple and sweet charting library for React Native applications.

Features:

• Line charts & candlestick charts
• Interactive price & date/time label components
• Built with composability in mind
• Highly customizable APIs
• Uses React Native Reanimated 2 under-the-hood
• Slick data transition animations
• Interactive tooltips

Basic Usage:

1. Install & download.

# NPM
$ npm i react-native-wagmi-charts

# DEPENDENCIES
$ npm i react-native-reanimated react-native-gesture-handler react-native-haptic-feedback

2. Create a line chart with this library.

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

// Define data

// Define data
const data = [
  {
    timestamp: TIMESTAMP 1,
    value: VALUE 1,
  },
  {
    timestamp: TIMESTAMP 2,
    value: VALUE 2,
  },
  {
    timestamp: TIMESTAMP3,
    value: VALUE 3,
  },
  // ...
];

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

3. Create a candlestick chart.

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

// Define data
const data = [
  {
    timestamp: 1625945400000,
    open: 33575.25,
    high: 33600.52,
    low: 33475.12,
    close: 33520.11,
  },
  {
    timestamp: 1625946300000,
    open: 33545.25,
    high: 33560.52,
    low: 33510.12,
    close: 33520.11,
  },
  {
    timestamp: 1625947200000,
    open: 33510.25,
    high: 33515.52,
    low: 33250.12,
    close: 33250.11,
  },
  // ...
];

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

Preview:

Download Details:

Author: coinjar

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/coinjar/react-native-wagmi-charts

License: MIT