{"id":22783585,"url":"https://github.com/birdwingo/react-native-reanimated-graph","last_synced_at":"2025-04-05T09:04:57.213Z","repository":{"id":183931901,"uuid":"670949248","full_name":"birdwingo/react-native-reanimated-graph","owner":"birdwingo","description":"🚀 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.","archived":false,"fork":false,"pushed_at":"2025-03-11T22:52:34.000Z","size":40010,"stargazers_count":70,"open_issues_count":1,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T08:05:25.584Z","etag":null,"topics":["animated","chart","graph","linegraph","react-native","reanimated","stock","svg","svg-animations"],"latest_commit_sha":null,"homepage":"https://birdwingo.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/birdwingo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-26T07:45:10.000Z","updated_at":"2025-02-28T16:07:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"4c44a4f8-e8e3-4907-ae01-b95d8886f674","html_url":"https://github.com/birdwingo/react-native-reanimated-graph","commit_stats":null,"previous_names":["birdwingo/react-native-reanimated-graph"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdwingo%2Freact-native-reanimated-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdwingo%2Freact-native-reanimated-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdwingo%2Freact-native-reanimated-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdwingo%2Freact-native-reanimated-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/birdwingo","download_url":"https://codeload.github.com/birdwingo/react-native-reanimated-graph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312077,"owners_count":20918344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","chart","graph","linegraph","react-native","reanimated","stock","svg","svg-animations"],"created_at":"2024-12-11T22:08:46.805Z","updated_at":"2025-04-05T09:04:57.124Z","avatar_url":"https://github.com/birdwingo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @birdwingo/react-native-reanimated-graph\n\n![npm downloads](https://img.shields.io/npm/dm/%40birdwingo/react-native-reanimated-graph)\n![npm version](https://img.shields.io/npm/v/%40birdwingo/react-native-reanimated-graph)\n![github release](https://github.com/birdwingo/react-native-reanimated-graph/actions/workflows/release.yml/badge.svg?event=pull_request)\n![npm release](https://github.com/birdwingo/react-native-reanimated-graph/actions/workflows/public.yml/badge.svg?event=release)\n\n## Features 🌟\n\n🚀 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.\n\n📊 Versatile Graphing: Whether it's SVG, Cubic Bezier, or any other graph type, we've got you covered.\n\n🎨 Customizable: Tons of optional properties to make the graph fit perfectly within your app's design.\n\n🖌 Smooth Visuals: Leveraging the power of Cubic Bezier for that polished, professional look.\n\n📱 React-Native Optimized: Tailored specifically for React-Native, ensuring seamless integration and performance on both iOS and Android.\n\n🔄 Dynamic Data Friendly: Easily handle real-time data updates without any performance hiccups.\n\n💡 Well-documented: Clear and concise documentation to get you up and running in no time.\n\n🌍 Community-Driven: We believe in the power of open-source. Join our community, contribute, or simply enjoy the product!\n\n🔧 Regular Updates: We're continuously improving. Stay tuned for regular updates and feature additions.\n\n❤️ Support \u0026 Collaboration: Having issues or suggestions? Our team and community are here to help!\n\n## About\n\n`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.\n\n\u003cdiv style=\"flex-direction:row;\"\u003e\n  \u003cimg src=\"./src/assets/images/demo.gif\" width=\"300\"\u003e\n  \u003cimg src=\"./src/assets/images/demo2.gif\" width=\"300\"\u003e\n\u003c/div\u003e\n\n## Installation\n\n```bash\nnpm install react-native-svg\nnpm install react-native-reanimated\nnpm install react-native-gesture-handler\nnpm install @birdwingo/react-native-reanimated-graph\n```\n\n## Usage\n\nTo 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:\n\n```jsx\nimport React, { useRef } from 'react';\nimport { View } from 'react-native';\nimport ReanimatedGraph, { ReanimatedGraphPublicMethods } from '@birdwingo/react-native-reanimated-graph';\n\nconst data = {\n  // Your data points here\n  xAxis: [0, 1, 2, 3, 4],\n  yAxis: [0, 5, 2, 7, 4],\n};\n\nconst YourComponent = () =\u003e {\n  const graphRef = useRef\u003cReanimatedGraphPublicMethods\u003e(null);\n\n  const updateGraphData = () =\u003e {\n    // Call this function to update the data displayed on the graph\n    if (graphRef.current) {\n      graphRef.current.updateData(data);\n    }\n  };\n\n  return (\n    \u003cView\u003e\n      \u003cReanimatedGraph\n        ref={graphRef}\n        xAxis={data.xAxis}\n        yAxis={data.yAxis}\n        // Add any other props as needed\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n\nexport default YourComponent;\n```\n\n## Props\n\n Name                    | Type                                         | Default value           | Description       \n-------------------------|----------------------------------------------|-------------------------|---------------------\n `xAxis`                 | number[]                                     | [0, 1]                  | An array of numbers representing the x-axis values of the data points.\n `yAxis`                 | number[]                                     | [0, 0]                  | An array of numbers representing the y-axis values of the data points.\n `picks`                 | [PickProps](#pickprops)[]                    | [0, 0]                  | An array of points that should be on graph highlited by dot.\n `color`                 | string                                       | '#FFFFFF'               | The color of the graph line.\n `widthRatio`            | number (0 - 1)                               | 1                       | The width ratio of the graph compared to available width.\n `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.\n `selectionAreaData`     | number[]                                     | []                      | An array of numbers representing the selection area data points.\n `height`                | number                                       | 200                     | The height of the graph component.\n `defaultWidth`          | number                                       |                         | If `defaultWidth` is not provided, width will be 100% of parent element.\n `animated`              | boolean                                      | true                    | Whether the graph should be animated.\n `animationDuration`     | number                                       | 750                     | The duration of the animation in ms.\n `smoothAnimation`       | boolean                                      | true                    | Whether the gesture animation should be smooth or not. If false, the selection dot will be only on graph points.\n `type`                  | 'curve'\\|'line'                              | 'curve'                 | The type of graph line.\n `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.\n `showXAxisLegend`       | boolean                                      | false                   | Whether to show the x-axis legend.\n `xAxisLegendQuantity`   | number                                       | 4                       | The quantity of x-axis legend values to display.\n `showYAxisLegend`       | boolean                                      | false                   | Whether to show the y-axis legend.\n `yAxisLegendQuantity`   | number                                       | 4                       | The quantity of y-axis legend values to display.\n `showExtremeValues`     | boolean                                      | true                    | Whether to show extreme values (min and max) on the graph.\n `showBlinkingDot`       | boolean                                      | false                   | Whether to show a blinking dot on the graph. (Will be placed at the last point of the graph)\n `showSelectionDot`      | boolean                                      | true                    | Whether to show the selection dot on the graph while hovering.\n `selectionLines`        |'horizontal'\\|'vertical'\\|'both'\\|'none'      | 'both'                  | The type of selection lines to display.\n `selectionLineColor`    | string                                       | '#D4D4D4'               | The color of the selection lines.\n `gestureEnabled`        | boolean                                      | true                    | Whether to enable gestures on the graph.\n `containerStyle`        | ViewProps['style']                           |                         | The style object to customize the container of the graph.\n `graphStyle`            | ViewProps['style']                           |                         | The style object to customize the graph.\n `textStyle`             | TextProps['style']                           |                         | The style object to customize the text elements in the graph.\n `renderXAxisLegend`     | (value: number, index: number) =\u003e 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 \u0026 `index` - the index of the x-axis value on legend.\n `renderYAxisLegend`     | (value: number, index: number) =\u003e 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 \u0026 `index` - the index of the y-axis value on legend.\n `renderExtremeValue`    | (value: number, type: 'min'\\|'max') =\u003e 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.\n `onGestureStart`        | () =\u003e void                                   |                         | A callback function invoked when a gesture is started on the graph.\n `onGestureEnd`          | () =\u003e void                                   |                         | A callback function invoked when a gesture is ended on the graph.\n `onGestureUpdate`       | (x: number, y: number, index: number) =\u003e 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.\n\n## Public Methods\n\nName                  | Type                                                                                                     | Description\n----------------------|----------------------------------------------------------------------------------------------------------|--------------\n`updateData`          | ({xAxis, yAxis, color, widthRatio, selectionArea, selectionAreaData, showBlinkingDot, pickProps}) =\u003e void| Use this method to update the data displayed on the graph dynamically. Types for data argument are the same as mentioned above.\n\n## Types\n\n### PickProps\n\n Parameter             | Type                                   | Required\n-----------------------|----------------------------------------|----------------\n `x`                   | number                                 | true\n `y`                   | number                                 | true\n `color`               | string                                 | true\n `renderLabel`         | () =\u003e JSX.Element                      | false\n\n## Sponsor\n\n**react-native-reanimated-graph** is sponsored by [Birdwingo](https://www.birdwingo.com).\\\nDownload Birdwingo mobile app to see react-native-reanimated-graph in action!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirdwingo%2Freact-native-reanimated-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbirdwingo%2Freact-native-reanimated-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirdwingo%2Freact-native-reanimated-graph/lists"}