📈 react-native-graph

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

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} />
}

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}
/>

---

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.

Example:

<LineGraph
  points={priceHistory}
  animated={true}
  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}
  TopAxisLabel={() => <AxisLabel x={max.x} value={max.value} />}
  BottomAxisLabel={() => <AxisLabel x={min.x} value={min.value} />}
/>

---

selectionDotShadowColor

The color of the selection dot.

Requires animated and enablePanGesture to be true.

Example:

<LineGraph
  points={priceHistory}
  animated={true}
  enablePanGesture={true}
  selectionDotShadowColor="#333333"
/>

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 hello@margelo.io!