{"id":13619487,"url":"https://github.com/margelo/react-native-graph","last_synced_at":"2025-05-14T09:06:30.564Z","repository":{"id":37521925,"uuid":"486967534","full_name":"margelo/react-native-graph","owner":"margelo","description":"📈 Beautiful, high-performance Graphs and Charts for React Native built with Skia","archived":false,"fork":false,"pushed_at":"2024-08-05T03:57:14.000Z","size":3831,"stargazers_count":2228,"open_issues_count":41,"forks_count":124,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-05-14T09:05:09.043Z","etag":null,"topics":["android","animated","animation","beautiful","chart","charts","crypto","graph","graphs","ios","library","linegraph","performance","react","react-native","skia","stock","svg","wallet"],"latest_commit_sha":null,"homepage":"https://margelo.io","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/margelo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2022-04-29T12:40:18.000Z","updated_at":"2025-05-13T01:39:40.000Z","dependencies_parsed_at":"2024-06-19T01:26:17.247Z","dependency_job_id":"1d25dc2f-89b1-47a4-aa99-605239d9510a","html_url":"https://github.com/margelo/react-native-graph","commit_stats":{"total_commits":80,"total_committers":12,"mean_commits":6.666666666666667,"dds":0.275,"last_synced_commit":"0cebf2881b419a615e39b5bbe1ec24e1851f2898"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/margelo%2Freact-native-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/margelo%2Freact-native-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/margelo%2Freact-native-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/margelo%2Freact-native-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/margelo","download_url":"https://codeload.github.com/margelo/react-native-graph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254110374,"owners_count":22016391,"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":["android","animated","animation","beautiful","chart","charts","crypto","graph","graphs","ios","library","linegraph","performance","react","react-native","skia","stock","svg","wallet"],"created_at":"2024-08-01T21:00:41.653Z","updated_at":"2025-05-14T09:06:30.542Z","avatar_url":"https://github.com/margelo.png","language":"TypeScript","readme":"\u003ca href=\"https://margelo.io\"\u003e\n  \u003cimg src=\"./img/banner.svg\" width=\"100%\" /\u003e\n\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  \u003ch1\u003e\n    📈 \u003cbr/\u003e\n    react-native-graph \u003cbr/\u003e \u003cbr/\u003e\n    \u003cimg src=\"./img/demo.gif\" align=\"center\" height=\"130\"\u003e\n  \u003c/h1\u003e\n\n  \u003cb\u003eBeautiful, high-performance Graphs/Charts for React Native.\u003c/b\u003e\n\u003c/div\u003e\n\n## About\n\n**react-native-graph** is a Line Graph implementation based on the high performance 2D graphics rendering engine \"Skia\". It's used in the [Pink Panda Wallet app](https://pinkpanda.io) to power thousands of token graphs every day.\n\n* 🏎️ Faster and smoother than react-native-svg graphs\n* ⚡️ Native path interpolation in Skia\n* 🐎 Up to 120 FPS animations\n* 📈 Cubic bezier rendering for smoother edges\n* 👍 Smooth pan/scrubbing gesture\n* 💰 Made for crypto apps and Wallets\n* ❌ Does not block navigation, press or scroll animations\n\n## Installation\n\n\u003cpre\u003e\nyarn add \u003ca href=\"https://github.com/software-mansion/react-native-reanimated\"\u003ereact-native-reanimated\u003c/a\u003e\nyarn add \u003ca href=\"https://github.com/software-mansion/react-native-gesture-handler\"\u003ereact-native-gesture-handler\u003c/a\u003e\nyarn add \u003ca href=\"https://github.com/Shopify/react-native-skia\"\u003e@shopify/react-native-skia\u003c/a\u003e\nyarn add \u003cb\u003ereact-native-graph\u003c/b\u003e\n\u003c/pre\u003e\n\n## Usage\n\n```jsx\nfunction App() {\n  const priceHistory = usePriceHistory('ethereum')\n\n  return \u003cLineGraph points={priceHistory} color=\"#4484B2\" /\u003e\n}\n```\n\n## Configuration\n\n### `animated`\n\n\u003cimg src=\"./img/change.gif\" align=\"right\" height=\"250\" /\u003e\n\nWhether to animate between data changes.\n\nAnimations are ran using the [Skia animation system](https://shopify.github.io/react-native-skia/docs/animations/animations) and are fully natively interpolated to ensure best possible performance.\n\nIf `animated` is `false`, a light-weight implementation of the graph renderer will be used, which is optimal for displaying a lot of graphs in large lists.\n\nExample:\n\n```jsx\n\u003cLineGraph\n  points={priceHistory}\n  animated={true}\n  color=\"#4484B2\"\n/\u003e\n```\n\n---\n\n### `enablePanGesture`\n\n\u003cimg src=\"./img/pan.gif\" align=\"right\" height=\"250\" /\u003e\n\nWhether to enable the pan gesture.\n\n\u003e  Requires `animated` to be `true`.\n\nThere are three events fired when the user interacts with the graph:\n\n1. `onGestureStart`: Fired once the user presses and holds down on the graph. The pan gesture _activates_.\n2. `onPointSelected`: Fired for each point the user pans through. You can use this event to update labels or highlight selection in the graph.\n3. `onGestureEnd`: Fired once the user releases his finger and the pan gesture _deactivates_.\n\nThe pan gesture can be configured using these props:\n\n1. `panGestureDelay`: Set delay for the pan gesture to activate. Set to `0` to start immediately after touch. Defaults to `300`.\n\nExample:\n\n```jsx\n\u003cLineGraph\n  points={priceHistory}\n  animated={true}\n  color=\"#4484B2\"\n  enablePanGesture={true}\n  onGestureStart={() =\u003e hapticFeedback('impactLight')}\n  onPointSelected={(p) =\u003e updatePriceTitle(p)}\n  onGestureEnd={() =\u003e resetPriceTitle()}\n/\u003e\n```\n\n---\n\n### `TopAxisLabel` / `BottomAxisLabel`\n\n\u003cimg src=\"./img/label.png\" align=\"right\" height=\"250\" /\u003e\n\nUsed to render labels above or below the Graph.\n\n\u003e  Requires `animated` to be `true`.\n\nUsually this is used to render the maximum and minimum values of the Graph. You can get the maximum and minimum values from your graph points array, and smoothly animate the labels on the X axis accordingly.\n\nExample:\n\n```jsx\n\u003cLineGraph\n  points={priceHistory}\n  animated={true}\n  color=\"#4484B2\"\n  TopAxisLabel={() =\u003e \u003cAxisLabel x={max.x} value={max.value} /\u003e}\n  BottomAxisLabel={() =\u003e \u003cAxisLabel x={min.x} value={min.value} /\u003e}\n/\u003e\n```\n\n### `Range`\n\n\u003cimg src=\"./img/range.png\" align=\"right\" height=\"150\" /\u003e\n\nUsed to define a range for the graph canvas\n\nThis range has to be bigger than the span of the provided data points. This feature can be used, e.g. if the graph should show a fixed timeframe, whether there's data for that period or not.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\nThis example shows data in the timeframe between 01/01/2000 to 01/31/2000 and caps the value between 0 and 200:\n\n```jsx\n\u003cLineGraph\n  points={priceHistory}\n  animated={true}\n  color=\"#4484B2\"\n  enablePanGesture={true}\n  range={{\n    x: {\n      min: new Date(new Date(2000, 1, 1).getTime()),\n      max: new Date(\n        new Date(2000, 1, 1).getTime() +\n        31 * 1000 * 60 * 60 * 24\n      )\n    },\n    y: {\n      min: 0,\n      max: 200\n    }\n  }}\n/\u003e\n```\n\n---\n\n### `SelectionDot`\n\n\u003cimg src=\"./img/selection-dot.jpeg\" align=\"right\" height=\"250\" /\u003e\n\nUsed to render the selection dot.\n\n\u003e  Requires `animated` and `enablePanGesture` to be `true`.\n\nIf `SelectionDot` is missing or `undefined`, a default one is provided with an outer ring and light shadow.\n\nExample:\n\n```jsx\n\u003cLineGraph\n  points={priceHistory}\n  animated={true}\n  color=\"#4484B2\"\n  enablePanGesture={true}\n  SelectionDot={CustomSelectionDot}\n/\u003e\n```\n\nSee this [example `\u003cSelectionDot /\u003e` component](./example/src/components/CustomSelectionDot.tsx).\n\n## Sponsor\n\n\u003cimg src=\"./img/pinkpanda.png\" align=\"right\" height=\"50\"\u003e\n\n**react-native-graph** is sponsored by [Pink Panda](https://pinkpanda.io).\n\nDownload the Pink Panda mobile app to see react-native-graph in action!\n\n## Community Discord\n\n[Join the Margelo Community Discord](https://discord.gg/6CSHz2qAvA) to chat about react-native-graph or other Margelo libraries.\n\n## Adopting at scale\n\nreact-native-graph was built at Margelo, an elite app development agency. For enterprise support or other business inquiries, contact us at \u003ca href=\"mailto:hello@margelo.io?subject=Adopting react-native-graph at scale\"\u003ehello@margelo.io\u003c/a\u003e!\n\n## Thanks\n\nSpecial thanks to [William Candillon](https://github.com/wcandillon) and [Christian Falch](https://github.com/chrfalch) for their amazing help and support for React Native Skia ❤️\n","funding_links":[],"categories":["Development","TypeScript"],"sub_categories":["Programming"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmargelo%2Freact-native-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmargelo%2Freact-native-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmargelo%2Freact-native-graph/lists"}