GithubHelp home page GithubHelp logo

erranddev / react-native-graph Goto Github PK

View Code? Open in Web Editor NEW

This project forked from margelo/react-native-graph

0.0 0.0 0.0 3.41 MB

๐Ÿ“ˆ Beautiful, high-performance Graphs and Charts for React Native built with Skia

Home Page: https://margelo.io

License: MIT License

JavaScript 2.62% Ruby 3.82% C 0.17% Objective-C 1.11% Java 11.00% TypeScript 79.32% Objective-C++ 1.86% Swift 0.09%

react-native-graph's Introduction

๐Ÿ“ˆ
react-native-graph

Beautiful, high-performance Graphs/Charts for React Native.

About

react-native-graph is a Line Graph implementation based on the high performance 2D graphics rendering engine "Skia". It's used in the Pink Panda Wallet app to power thousands of token graphs every day.

  • ๐ŸŽ๏ธ Faster and smoother than react-native-svg graphs
  • โšก๏ธ Native path interpolation in Skia
  • ๐ŸŽ Up to 120 FPS animations
  • ๐Ÿ“ˆ Cubic bezier rendering for smoother edges
  • ๐Ÿ‘ Smooth pan/scrubbing gesture
  • ๐Ÿ’ฐ Made for crypto apps and Wallets
  • โŒ Does not block navigation, press or scroll animations

Installation

yarn add react-native-reanimated
yarn add react-native-gesture-handler
yarn add @shopify/react-native-skia
yarn add react-native-graph

Usage

function App() {
  const priceHistory = usePriceHistory('ethereum')

  return <LineGraph points={priceHistory} color="#4484B2" />
}

Configuration

animated

Whether to animate between data changes.

Animations are ran using the Skia animation system and are fully natively interpolated to ensure best possible performance.

If animated is false, a light-weight implementation of the graph renderer will be used, which is optimal for displaying a lot of graphs in large lists.

Example:

<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
/>

enablePanGesture

Whether to enable the pan gesture.

Requires animated to be true.

There are three events fired when the user interacts with the graph:

  1. onGestureStart: Fired once the user presses and holds down on the graph. The pan gesture activates.
  2. onPointSelected: Fired for each point the user pans through. You can use this event to update labels or highlight selection in the graph.
  3. onGestureEnd: Fired once the user releases his finger and the pan gesture deactivates.

The pan gesture can be configured using these props:

  1. panGestureDelay: Set delay for the pan gesture to activate. Set to 0 to start immediately after touch. Defaults to 300.

Example:

<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
  enablePanGesture={true}
  onGestureStart={() => hapticFeedback('impactLight')}
  onPointSelected={(p) => updatePriceTitle(p)}
  onGestureEnd={() => resetPriceTitle()}
/>

TopAxisLabel / BottomAxisLabel

Used to render labels above or below the Graph.

Requires animated to be true.

Usually this is used to render the maximum and minimum values of the Graph. You can get the maximum and minimum values from your graph points array, and smoothly animate the labels on the X axis accordingly.

Example:

<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
  TopAxisLabel={() => <AxisLabel x={max.x} value={max.value} />}
  BottomAxisLabel={() => <AxisLabel x={min.x} value={min.value} />}
/>

Range

Used to define a range for the graph canvas

This range has to be bigger than the span of the provided data points. This feature can be used, e.g. if the graph should show a fixed timeframe, whether there's data for that period or not.



This example shows data in the timeframe between 01/01/2000 to 01/31/2000 and caps the value between 0 and 200:

<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
  enablePanGesture={true}
  range={{
    x: {
      min: new Date(new Date(2000, 1, 1).getTime()),
      max: new Date(
        new Date(2000, 1, 1).getTime() +
        31 * 1000 * 60 * 60 * 24
      )
    },
    y: {
      min: 0,
      max: 200
    }
  }}
/>

SelectionDot

Used to render the selection dot.

Requires animated and enablePanGesture to be true.

If SelectionDot is missing or undefined, a default one is provided with an outer ring and light shadow.

Example:

<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
  enablePanGesture={true}
  SelectionDot={CustomSelectionDot}
/>

See this example <SelectionDot /> component.

Sponsor

react-native-graph is sponsored by Pink Panda.

Download the Pink Panda mobile app to see react-native-graph in action!

Community Discord

Join the Margelo Community Discord to chat about react-native-graph or other Margelo libraries.

Adopting at scale

react-native-graph was built at Margelo, an elite app development agency. For enterprise support or other business inquiries, contact us at [email protected]!

Thanks

Special thanks to William Candillon and Christian Falch for their amazing help and support for React Native Skia โค๏ธ

react-native-graph's People

Contributors

mrousavy avatar chrispader avatar akinncar avatar nodonisko avatar robinvw1 avatar bored-yuns avatar esthor avatar gtokman avatar asantaelly avatar dynamichny avatar szymon20000 avatar thomas-coldwell avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.