A line chart (or line graph) is a simple graphical tool to represent values with markers or points over line or bars. A line chart is simple to understand, but at the same time powerful if you get the skills to build it.

Impress your users with this high-performance Line Chart for React Native (as an open-source product, you can use in commercial projects). The best part is that it uses SVG to render the chart, which means that you can easily customize it to your own needs and preferences. Enjoy!

Features:

• 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

Dependencies:

Basic usage:

1. Install and import the Line Chart Library.

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

2. Add the Line Graph component to the app.

function App() {
  const priceHistory = usePriceHistory('ethereum')
  return <LineGraph points={priceHistory} />
}

3. Available props.

interface BaseLineGraphProps extends ViewProps {
  /**
   * All points to be marked in the graph. Coordinate system will adjust to scale automatically.
   */
  points: GraphPoint[]
  /**
   * Color of the graph line (path)
   */
  color: string
  /**
   * The width of the graph line (path)
   *
   * @default 3
   */
  lineThickness?: number
  /**
   * Enable the Fade-In Gradient Effect at the beginning of the Graph
   */
  enableFadeInMask?: boolean
}

export type AnimatedLineGraphProps = BaseLineGraphProps & {
  /**
   * Whether to enable Graph scrubbing/pan gesture.
   */
  enablePanGesture?: boolean
  /**
   * The color of the selection dot when the user is panning the graph.
   */
  selectionDotShadowColor?: string
  /**
   * Called for each point while the user is scrubbing/panning through the graph
   */
  onPointSelected?: (point: GraphPoint) => void
  /**
   * Called once the user starts scrubbing/panning through the graph
   */
  onGestureStart?: () => void
  /**
   * Called once the user stopped scrubbing/panning through the graph
   */
  onGestureEnd?: () => void
  /**
   * The element that gets rendered above the Graph (usually the "max" point/value of the Graph)
   */
  TopAxisLabel?: () => React.ReactElement | null
  /**
   * The element that gets rendered below the Graph (usually the "min" point/value of the Graph)
   */
  BottomAxisLabel?: () => React.ReactElement | null
}

Preview:

Download Details:

Author: margelo

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/margelo/react-native-graph

License: MIT