Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/birdwingo/react-native-reanimated-graph
🚀 Reanimated graph: Dive into smooth and high-performance graphing in react native. Built atop the prowess of react-native-reanimated, our library guarantees fluid animations even with extensive data. From SVGs to Cubic Beziers, customize and shine with versatile options at your fingertips.
https://github.com/birdwingo/react-native-reanimated-graph
animated chart graph linegraph react-native reanimated stock svg svg-animations
Last synced: 3 days ago
JSON representation
🚀 Reanimated graph: Dive into smooth and high-performance graphing in react native. Built atop the prowess of react-native-reanimated, our library guarantees fluid animations even with extensive data. From SVGs to Cubic Beziers, customize and shine with versatile options at your fingertips.
- Host: GitHub
- URL: https://github.com/birdwingo/react-native-reanimated-graph
- Owner: birdwingo
- License: mit
- Created: 2023-07-26T07:45:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-21T05:45:25.000Z (2 months ago)
- Last Synced: 2025-01-16T03:11:00.852Z (10 days ago)
- Topics: animated, chart, graph, linegraph, react-native, reanimated, stock, svg, svg-animations
- Language: TypeScript
- Homepage: https://birdwingo.com
- Size: 39.9 MB
- Stars: 69
- Watchers: 1
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @birdwingo/react-native-reanimated-graph
## Features 🌟
🚀 Supercharged Performance with React-Native-Reanimated: Our library leverages the power of react-native-reanimated to ensure fluid animations and top-tier speed, making your graphs shine even with hefty data sets.
📊 Versatile Graphing: Whether it's SVG, Cubic Bezier, or any other graph type, we've got you covered.
🎨 Customizable: Tons of optional properties to make the graph fit perfectly within your app's design.
🖌 Smooth Visuals: Leveraging the power of Cubic Bezier for that polished, professional look.
📱 React-Native Optimized: Tailored specifically for React-Native, ensuring seamless integration and performance on both iOS and Android.
🔄 Dynamic Data Friendly: Easily handle real-time data updates without any performance hiccups.
💡 Well-documented: Clear and concise documentation to get you up and running in no time.
🌍 Community-Driven: We believe in the power of open-source. Join our community, contribute, or simply enjoy the product!
🔧 Regular Updates: We're continuously improving. Stay tuned for regular updates and feature additions.
❤️ Support & Collaboration: Having issues or suggestions? Our team and community are here to help!
## About
`react-native-reanimated-graph` is a React Native component that provides a customizable and animated graph for displaying data. It allows you to visualize data points on a graph and supports various configuration options to customize the appearance and behavior of the graph. It is used in the [Birdwingo mobile app](https://www.birdwingo.com) to show user portfolio graphs and market graphs.
## Installation
```bash
npm install react-native-svg
npm install react-native-reanimated
npm install react-native-gesture-handler
npm install @birdwingo/react-native-reanimated-graph
```
## Usage
To use the `ReanimatedGraph` component, you need to import it in your React Native application and include it in your JSX code. Here's an example of how to use it:
```jsx
import React, { useRef } from 'react';
import { View } from 'react-native';
import ReanimatedGraph, { ReanimatedGraphPublicMethods } from '@birdwingo/react-native-reanimated-graph';
const data = {
// Your data points here
xAxis: [0, 1, 2, 3, 4],
yAxis: [0, 5, 2, 7, 4],
};
const YourComponent = () => {
const graphRef = useRef(null);
const updateGraphData = () => {
// Call this function to update the data displayed on the graph
if (graphRef.current) {
graphRef.current.updateData(data);
}
};
return (
);
};
export default YourComponent;
```
## Props
Name | Type | Default value | Description
-------------------------|----------------------------------------------|-------------------------|---------------------
`xAxis` | number[] | [0, 1] | An array of numbers representing the x-axis values of the data points.
`yAxis` | number[] | [0, 0] | An array of numbers representing the y-axis values of the data points.
`picks` | [PickProps](#pickprops)[] | [0, 0] | An array of points that should be on graph highlited by dot.
`color` | string | '#FFFFFF' | The color of the graph line.
`widthRatio` | number (0 - 1) | 1 | The width ratio of the graph compared to available width.
`selectionArea` | 'default'\|'none'\|'custom' | 'default' | The selection area type. The selection area is highlighted while hovering over the graph. If `custom` you need to provide `selectionAreaData`, if `default`, selection area is to the left of the gesture point.
`selectionAreaData` | number[] | [] | An array of numbers representing the selection area data points.
`height` | number | 200 | The height of the graph component.
`defaultWidth` | number | | If `defaultWidth` is not provided, width will be 100% of parent element.
`animated` | boolean | true | Whether the graph should be animated.
`animationDuration` | number | 750 | The duration of the animation in ms.
`smoothAnimation` | boolean | true | Whether the gesture animation should be smooth or not. If false, the selection dot will be only on graph points.
`type` | 'curve'\|'line' | 'curve' | The type of graph line.
`maxPoints` | number | 512 | The maximum number of data points to display on the graph. If the data has more points than `maxPoints`, the data will be reduced so that it does not affect the shape of the graph.
`showXAxisLegend` | boolean | false | Whether to show the x-axis legend.
`xAxisLegendQuantity` | number | 4 | The quantity of x-axis legend values to display.
`showYAxisLegend` | boolean | false | Whether to show the y-axis legend.
`yAxisLegendQuantity` | number | 4 | The quantity of y-axis legend values to display.
`showExtremeValues` | boolean | true | Whether to show extreme values (min and max) on the graph.
`showBlinkingDot` | boolean | false | Whether to show a blinking dot on the graph. (Will be placed at the last point of the graph)
`showSelectionDot` | boolean | true | Whether to show the selection dot on the graph while hovering.
`selectionLines` |'horizontal'\|'vertical'\|'both'\|'none' | 'both' | The type of selection lines to display.
`selectionLineColor` | string | '#D4D4D4' | The color of the selection lines.
`gestureEnabled` | boolean | true | Whether to enable gestures on the graph.
`containerStyle` | ViewProps['style'] | | The style object to customize the container of the graph.
`graphStyle` | ViewProps['style'] | | The style object to customize the graph.
`textStyle` | TextProps['style'] | | The style object to customize the text elements in the graph.
`renderXAxisLegend` | (value: number, index: number) => void | | A function to render custom x-axis legend values. It takes two arguments, `value` - the x-axis value for which the legend is being rendered & `index` - the index of the x-axis value on legend.
`renderYAxisLegend` | (value: number, index: number) => void | | A function to render custom y-axis legend values. It takes two arguments, `value` - the y-axis value for which the legend is being rendered & `index` - the index of the y-axis value on legend.
`renderExtremeValue` | (value: number, type: 'min'\|'max') => void | | A function to render custom extreme values. It takes two arguments, `value` - the extreme value to be rendered, `type` - the type of extreme value, either minimum or maximum.
`onGestureStart` | () => void | | A callback function invoked when a gesture is started on the graph.
`onGestureEnd` | () => void | | A callback function invoked when a gesture is ended on the graph.
`onGestureUpdate` | (x: number, y: number, index: number) => void| | A callback function invoked when a gesture is updated on the graph. It takes three arguments, `x` - the x-axis value at the position of the gesture, `y` - the y-axis value at the position of the gesture, `index` - the index of the nearest data point to the gesture position.
## Public Methods
Name | Type | Description
----------------------|----------------------------------------------------------------------------------------------------------|--------------
`updateData` | ({xAxis, yAxis, color, widthRatio, selectionArea, selectionAreaData, showBlinkingDot, pickProps}) => void| Use this method to update the data displayed on the graph dynamically. Types for data argument are the same as mentioned above.
## Types
### PickProps
Parameter | Type | Required
-----------------------|----------------------------------------|----------------
`x` | number | true
`y` | number | true
`color` | string | true
`renderLabel` | () => JSX.Element | false
## Sponsor
**react-native-reanimated-graph** is sponsored by [Birdwingo](https://www.birdwingo.com).\
Download Birdwingo mobile app to see react-native-reanimated-graph in action!