Skip to content

LightspeedHQ/react-native-graphs

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

LineExample

LineBenchmarkExample

LineBenchmarkExample

ColumnExample

ColumnExample

ColumnStackExample

ColumnStackExample

Contributing

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

License

MIT

About

Open source React Native graphing library

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published