react-native-graphs

A performant and composable React Native library for building graphs for Android and iOS.

✨ Features

• 📈 Line graphs
• 📊 Column graphs
• 📊 Stacked Column graphs
• X/Y axis lines
• X/Y axis labels
• X axis index lines
• Touch/pan index selection
• Text tooltips

Installation

yarn add react-native-graphs

Usage

Compose your own graphs with the layers you need via a shared layout and scale configuration.

// Define common properties
const graphLayout = getLayout({ width, height });
const graphScales = getScales(graphLayout, dataLength, dataMaxY, dataMinY);

// Render layers you need
<>
  <DataLine layout={graphLayout} scales={graphScales} ... />
  <XAxisLines ... />
  <XAxisLabels ... />
  <IndexSelectionTap ... />
</>

Examples (code in /examples)

LineExample

LineBenchmarkExample

ColumnExample

ColumnStackExample

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT