# margelo/react-native-graph

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/margelo-react-native-graph).**

2,547 stars · 134 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/margelo/react-native-graph
- Homepage: https://margelo.io
- awesome-repositories: https://awesome-repositories.com/repository/margelo-react-native-graph.md

## Topics

`android` `animated` `animation` `beautiful` `chart` `charts` `crypto` `graph` `graphs` `ios` `library` `linegraph` `performance` `react` `react-native` `skia` `stock` `svg` `wallet`

## Description

This project is a cross-platform mobile graphing library designed for rendering high-performance animated line charts and data visualizations. It functions as a canvas-based data visualization system and interactive charting component for mobile applications.

The library focuses on animated data visualization, using interpolation to create smooth visual transitions between different data sets. It utilizes a GPU-accelerated graphics engine to maintain high frame rates and fluid transitions during data updates.

The capability surface includes interaction systems for tracking pan gestures and detecting touch interactions with specific data points. It also provides tools for defining canvas range boundaries and rendering dynamic axis labels.

## Tags

### Data & Databases

- [Animated Visualizations](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/data-visualization/animated-visualizations.md) — Functions as an animated visualization tool that interpolates state changes between data sets for smooth updates.
- [High-Performance Visualizers](https://awesome-repositories.com/f/data-databases/data-visualization-charts/high-performance-visualizers.md) — Provides a high-performance rendering engine specifically designed for drawing responsive line graphs and charts. ([source](https://cdn.jsdelivr.net/gh/margelo/react-native-graph@main/README.md))
- [Animated Data Representations](https://awesome-repositories.com/f/data-databases/animated-data-representations.md) — Visualizes the evolution of numerical data through fluid interpolations and animations between data sets.
- [Graph Range Constraints](https://awesome-repositories.com/f/data-databases/chart-axes/scale-and-range-configurations/output-range-definitions/graph-range-constraints.md) — Allows setting fixed boundaries for a graph display to show specific timeframes or value spans. ([source](https://cdn.jsdelivr.net/gh/margelo/react-native-graph@main/README.md))
- [Interactive Data Charting](https://awesome-repositories.com/f/data-databases/interactive-data-charting.md) — Provides tools for transforming datasets into interactive mobile charts supporting pan and touch events.

### Graphics & Multimedia

- [Hardware-Accelerated Engines](https://awesome-repositories.com/f/graphics-multimedia/animation-motion/hardware-accelerated-engines.md) — Leverages a GPU-accelerated graphics engine (Skia) to maintain high frame rates for complex path rendering.
- [Canvas Rendering](https://awesome-repositories.com/f/graphics-multimedia/canvas-rendering.md) — Uses a canvas-based rendering system for direct pixel manipulation to ensure fluid transitions and high frame rates.
- [State Transition Animators](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/programmatic-animation-apis/state-transition-animators.md) — Utilizes animators that tween numerical state changes to create fluid visual transitions between different data sets.
- [Data Space Mappings](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/visualization-frameworks/coordinate-systems/page-coordinate-mapping/screen-space-coordinate-mappings/data-space-mappings.md) — Translates screen-space touch coordinates into data-space values to identify specific data points on a graph.
- [Viewport Coordinate Mappings](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/visualization-frameworks/coordinate-systems/page-coordinate-mapping/screen-space-coordinate-mappings/viewport-coordinate-mappings.md) — Implements mappings that translate between data coordinates, viewport dimensions, and physical screen pixels for graph rendering.
- [Reactive Path Generators](https://awesome-repositories.com/f/graphics-multimedia/reactive-path-generators.md) — Automatically regenerates drawing paths whenever the underlying data array or dimensions change.

### Mobile Development

- [Cross-Platform Graphing Libraries](https://awesome-repositories.com/f/mobile-development/cross-platform-graphing-libraries.md) — Provides a GPU-accelerated graphics engine for rendering animated line charts in cross-platform mobile applications.

### User Interface & Experience

- [Chart Components](https://awesome-repositories.com/f/user-interface-experience/chart-components.md) — Ships an interactive chart component featuring pan gesture tracking and data point detection for mobile touch screens.
- [Axis Label Formatters](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/visualization-configuration-utilities/axis-tick-formatters/axis-label-formatters.md) — Implements dynamic formatting and rendering of labels for the graph's minimum and maximum axes. ([source](https://cdn.jsdelivr.net/gh/margelo/react-native-graph@main/README.md))
- [Interactive Data Interfaces](https://awesome-repositories.com/f/user-interface-experience/interactive-data-interfaces.md) — Facilitates user interaction with data through pan gesture tracking and coordinate-based point detection. ([source](https://cdn.jsdelivr.net/gh/margelo/react-native-graph@main/README.md))
- [View Transition Animations](https://awesome-repositories.com/f/user-interface-experience/view-transition-animations.md) — Provides animations that interpolate the positions of data points when transitioning between different data sets. ([source](https://cdn.jsdelivr.net/gh/margelo/react-native-graph@main/README.md))