{"id":13630204,"url":"https://github.com/rainbow-me/react-native-animated-charts","last_synced_at":"2025-05-15T14:04:22.897Z","repository":{"id":37953034,"uuid":"295515829","full_name":"rainbow-me/react-native-animated-charts","owner":"rainbow-me","description":"Set of components and helpers for building complex and beautifully animated charts","archived":false,"fork":false,"pushed_at":"2024-05-29T03:54:52.000Z","size":4728,"stargazers_count":943,"open_issues_count":64,"forks_count":114,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-14T15:55:41.451Z","etag":null,"topics":["animations","charts","native","react","react-native","reanimated","reanimated2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/rainbow-me.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2020-09-14T19:18:48.000Z","updated_at":"2025-05-07T15:12:51.000Z","dependencies_parsed_at":"2024-08-01T22:52:25.702Z","dependency_job_id":null,"html_url":"https://github.com/rainbow-me/react-native-animated-charts","commit_stats":{"total_commits":19,"total_committers":5,"mean_commits":3.8,"dds":"0.21052631578947367","last_synced_commit":"1a623fbc5d6eca1a19c4ed37833c8d9677285ea8"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rainbow-me%2Freact-native-animated-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rainbow-me%2Freact-native-animated-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rainbow-me%2Freact-native-animated-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rainbow-me%2Freact-native-animated-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rainbow-me","download_url":"https://codeload.github.com/rainbow-me/react-native-animated-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355334,"owners_count":22057354,"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":["animations","charts","native","react","react-native","reanimated","reanimated2"],"created_at":"2024-08-01T22:01:33.586Z","updated_at":"2025-05-15T14:04:22.875Z","avatar_url":"https://github.com/rainbow-me.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003eReact Native Animated Charts\u003c/h1\u003e\n  \u003ch3 align=\"center\"\u003eSet of components and helpers for building complex and beautifully animated charts.\u003c/h3\u003e\n\u003c/p\u003e\n\n![](gifs/ios.gif) | ![](gifs/android.gif) |\n:----------------:|:---------------------:|\n\nThe library was designed to create aesthetic, animated (so far only linear) charts based on a given input. \nThe main assumptions of the library were to create smooth transitions between subsequent data sets. For this reason,\nwe have discovered a shortage of existing libraries related to the charts.\nThe current package was created as part of the [Rainbow.me project](https://rainbow.me/) and for this reason it was not designed as a complete and comprehensive solution for displaying various types of charts. However, we will be now using more charts in the whole application, so we believe that the number of functionalities in the application will gradually grow. \n\nAdditionally, we are open to new Pull Requests. We want this library to become popular and complete thanks to community activity.\n\nIt's a part of the [Rainbow.me project](https://rainbow.me/). \n\n## Installation\n\n1. Install [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/next/fundamentals/installation) in the newest version. \n2. \n```bash\nyarn add @rainbow-me/animated-charts\n```\n\nThe library has been verified with `2.0.0-alpha.6` version of reanimated.\n\n### Reanimated\nUsing TurboModules might have an impact on your current development flow and most likely\nyou don't want to decrease your DX. Since we're not using reanimated in other places in the app, we\nmade some tweaks to disable charts in development mode with compilation macros on iOS. \nYou can find it [here](https://github.com/rainbow-me/rainbow/blob/develop/ios/Rainbow/AppDelegate.mm)\n\nAlso, because we're using libraries which currently do not support reanimated 2,\nwe [patched exports in reanimated](https://github.com/rainbow-me/rainbow/tree/develop/patches)\n\nFurthermore, we found few differences in how the `Animated` module works with and without TurboModules support, so \nwe [made a trick](https://github.com/rainbow-me/rainbow/tree/develop/patches) to fallback to the not-TM version of Animated. \n\nMost likely, you don't need any of those patches.\n\n## Example app\nWe made a generic example to show briefly what's possible to achieve with this library.\nA Real-life example is available inside [Rainbow](https://github.com/rainbow-me)!\n\nIn order to run an example clone this repo and navigate to `Example` then:\n```\nyarn \u0026\u0026 cd ios \u0026\u0026 pod install \u0026\u0026 cd ..\nreact-native run-android\nreact-native run-ios\n```\n\n## API\nThe library has been designed to provide as much flexibility as possible with the component-based API for easy integration with existing applications. \n\n### Basic API Example\n```jsx\nimport React from 'react';\nimport {Dimensions, View} from 'react-native';\nimport {ChartDot, ChartPath, ChartPathProvider, monotoneCubicInterpolation} from '@rainbow-me/animated-charts';\n\nexport const {width: SIZE} = Dimensions.get('window');\n\nexport const data = [\n  {x: 1453075200, y: 1.47}, {x: 1453161600, y: 1.37},\n  {x: 1453248000, y: 1.53}, {x: 1453334400, y: 1.54},\n  {x: 1453420800, y: 1.52}, {x: 1453507200, y: 2.03},\n  {x: 1453593600, y: 2.10}, {x: 1453680000, y: 2.50},\n  {x: 1453766400, y: 2.30}, {x: 1453852800, y: 2.42},\n  {x: 1453939200, y: 2.55}, {x: 1454025600, y: 2.41},\n  {x: 1454112000, y: 2.43}, {x: 1454198400, y: 2.20},\n];\n\nconst points = monotoneCubicInterpolation({data, range: 40});\n\nconst BasicExample = () =\u003e (\n  \u003cView style={{ backgroundColor: 'black' }}\u003e\n    \u003cChartPathProvider data={{ points, smoothingStrategy: 'bezier' }}\u003e\n      \u003cChartPath height={SIZE / 2} stroke=\"yellow\" width={SIZE} /\u003e\n      \u003cChartDot style={{ backgroundColor: 'blue' }} /\u003e\n    \u003c/ChartPathProvider\u003e\n  \u003c/View\u003e\n);\n```\n\nThe code above generates the chart below:\n\n![](gifs/basic.png)\n\n### Linear charts\n\n### `ChartPathProvider`\nThe whole chart's structure has to be wrapped with `ChartProvider`. It's responsible for data managing and itself does not have a visual impact on the layout. Under the hood, it uses context API to simplify manipulation with other components. The rule is to use one data series for each wrapper.\nIt's important to have it as a separated component because under this component it's possible `useChartData` hook and put `ChartDot` component. However, if you don't need those features, you can pass `data` directly to `ChartPath` and drop this wrapper. \n\n| Prop name       | type       | default / obligatory   | description |\n|-----------------|------------|------------------------|-------------|\n| `data`          | \u003ccode\u003e{ points: [Point], nativePoints: [Point], smoothingStrategy?: 'bezier'\u0026#124;'simple'\u0026#124;'complex', smoothingFactor  }\u003ccode/\u003e   | obligatory  | Object containing data structure and way to display them. Each of the properties is explained below.  |\n\n- `points` is an array containing `Point`s to be displayed. A `Point` is an object containing `x` and `y` as a number.\n- `originalData` is an array of points that will not be drawn. However, if you used some strategy of interpolating data or simplifying you might want to present data slightly different from the real one. Then if you'd like labels to be fully correct you may want to provide real data before adjusting them.\n- `smoothingStrategy`. While presenting points path can be drawn with different approaches.  \n  - If `smoothingStrategy` is not provided (or set to any other value but for listed here), connects points using linear interpolation.\n  - The `bezier` strategy connects points with a bezier path inspired by [d3 shape](https://github.com/d3/d3-shape/blob/master/src/curve/basis.js). It's not parametrized by `smoothingFactor`.\n  - The `complex` strategy uses approach explained [here](https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74) using cubic splines. It's parametrized by `smoothingFactor`.\n  - The `simple` strategy is a bit simplified `complex` strategy using quadratic splines. It's parametrized by `smoothingFactor`.\n- `smoothingFactor`. Is a value from `0` to `1` defining how smooth a presentation should be. `0` means no smoothing, and it's the default. `smoothingFactor` has an impact if `smoothingStrategy` is `simple` or `complex`.\n- `yRange`. 2-elements array with numbers describing minY and maxY in this order. When not applied, charts are automatically adjusted vertically. However, when data are monotonical, they might present incorrectly without bounding due to numerical issues. \n\n### `ChartPath`\nThis component is used for showing the path itself.\n\n| Prop name                            | type       | default / obligatory   | description |\n|--------------------------------------|------------|------------------------|-------------|\n| `smoothingWhileTransitioningEnabled` | `number`   | `false`                | Although smoothing is not complex computing, it might impact performance in some low-end devices so while having a big set of data it might be worth disable smoothing while transitioning.   |\n| `height`                             | `number`   | obligatory             | Height od the SVG canvas    |\n| `width`                              | `number`   | obligatory             | Width od the SVG canvas    |\n| `strokeWidth`                        | `number`   | `1`                    | Width of the path.  |\n| `selectedStrokeWidth`                | `number`   | `1`                    | Width of the path selected.  |\n| `gestureEnabled`                     | `boolean`  | `true`                 | Defines if interaction with the chart should be allowed or not  |\n| `longPressGestureHandlerProps`       | `object`   | `{maxDist: 100000, minDurationMs: 0, shouldCancelWhenOutside: false}`  | Under the hood we're using `LongPressGestureHandler` for handling interactions. It's recommended to not override its props. However, it might be useful while interacting with another GH. |\n| `selectedOpacity`                    | `number`   | `0.7`                  | Target opacity of the path while touching the chart.\n| `hitSlop`                         | `number`   | `0`                    |  While scrubbing the chart touching edges of the screen you may want make points on the edges more accessible. With `hitSlop` it's possible to access points on edges doubling the speed of scrubbing beyond this margin.  |\n| `hapticsEnabled`                      | `boolean`  | `false`                |  On pressing in/out on the chart it might be expected to make haptic feedback. It will happen with `hapticsEnabled` set to `true`.  |\n| `springConfig`                       | object     | `{damping: 15, mass: 1, stiffness: 600}`  | Object [defining the spring animation](https://docs.swmansion.com/react-native-reanimated/docs/next/animations). This spring is used for a dot's scale.\n| `timingFeedbackConfig`               | object     | `{duration: 80}`       | Object [defining the timing animation](https://docs.swmansion.com/react-native-reanimated/docs/next/animations). `timingFeedbackConfig` is used for a path's opacity and width.\n| `timingAnimationConfig`              | object     | `{duration: 300}`      | Object [defining the timing animation](https://docs.swmansion.com/react-native-reanimated/docs/next/animations). `timingAnimationConfig` is used for the transition between chart's data.\n| ...rest                              | `object`   | `{}`                   | Props applied to SVG [Path](https://github.com/react-native-community/react-native-svg#path). |\n\n\n### `ChartDot`\nComponent for displaying the dot for scrubbing on the chart. \n\n| Prop name    | type       | default | description |\n|--------------|------------|---------|-------------|\n| `size`       | `number`   | `10`    | Size of the dot.  |\n| ...props     | `object`   | `{}`    | Rest of the props applied to `Reanimated.View` including `style`   |\n\n### `ChartYLabel` \u0026 `ChartXLabel`\nLabels are useful while moving finger through the chart to show the exact value in given point. \n\n| Prop name    | type                 | default  | description |\n|--------------|----------------------|----------|-------------|\n| `format`     | reanimated worklet   | `a =\u003e a` | Worklet for formatting data from the chart. It can be useful when your data is a timestamp or currency.  |\n| ...props     | `object`             | `{}`     | Rest of the props applied to `TextInput` including `style`   |\n\n### `CurrentPositionVerticalLine` \u0026 `OpeningPositionHorizontalLine`\nCurrentPositionVerticalLine is a vertical line moving with user's finger through chart.\n\nOpeningPositionHorizontalLine is a horizontal static line on height of the first point.\n\n| Prop name    | type                 | default  | description |\n|--------------|----------------------|----------|-------------|\n| `color`      | `string`             | `#000000`| Color of the line.  |\n| `thickness`  | `number`             | `2`      | Thickness of the line.  |\n| `length`     | `number`             | `null`   | Length of the line.  |\n| ...props     | `object`             | `{}`     | Rest of the props applied to svg's `Line`.   |\n\n![](gifs/lines.png)\n\n\n### Candle Charts\nTODO\n### Pie charts\nTODO\n\n## Helpers\nIt's not essential in the library, but we have decided to include a lot of helpers we are (or we were) using for displaying charts.\n## Interpolations\nWe have two interpolators which share the most of the API: `bSplineInterpolation` and `monotoneCubicInterpolation`.\n```js\nimport { bSplineInterpolation as interpolator } from '@rainbow-me/animated-charts';\n// import { monotoneCubicInterpolation as interpolator } from '@rainbow-me/animated-charts';\n\nconst interpolatedData = interpolator({data, range: 80});\n```\n\nCode above generates 80 equidistant points from given dataset.\nGenerator accepts object of parameters as an argument:\n- `data` - input of points.\n- `range` is the number of points of the output.\n- `includeExtremes`. If it's vital to include extremes in the output, set to true. However, the data might not be fully equidistant. \n- `removePointsSurroundingExtremes`. Makes sense only if `includeExtremes` set to `true`. When disabled, it might be possible that extremes look very \"pointy\". To get rid of this, you can remove points surrounding extremes.\nE.g. \n\n  - `removePointsSurroundingExtremes = false`\n\n       `o---------o----Min--o---------o---------o---------o---------o`\n  \n  - `removePointsSurroundingExtremes = true`\n  \n       `o--------------Min------------o---------o---------o---------o`\n\n### `bSplineInterpolation({ degree = 3, ...params })`\n`bSplineInterpolation` is inspired by [victorian lib](https://github.com/networkcube/vistorian/blob/17e2be9b51267509ea67b5984421d8c03558d928/core/lib/BSpline.js)\nand uses [B-spline](https://en.wikipedia.org/wiki/B-spline) interpolation of a given `degree`.\n\n### `monotoneCubicInterpolation({ ...params })`\nThis curve is inspired by [d3 shape](https://github.com/d3/d3-shape/blob/master/src/curve/monotone.js).\n\"Produces a cubic spline that preserves monotonicity in y, assuming monotonicity in x, as proposed by Steffen in A simple method for monotonic interpolation in one dimension: “a smooth curve with continuous first-order derivatives that passes through any given set of data points without spurious oscillations. Local extrema can occur only at grid points where they are given by the data, but not in between two adjacent grid points.”                                                                                                                                                                  \n\n\n\n## `simplifyData(data, pickRange = 10, includeExtremes = true)`\nThis helper takes only one point per `pickRange`. Might be useful for very dense data. If it's important, it's possible to include extremes with the `includeExtremes` flag.\nE.g. \n\n`pickRange = 3, includeExtremes = true`\n\n```\nX are equidistant in this case\n\nY:0          1          7          2         -3          0          1          2\n  S----------o----------E----------X----------E----------o----------X----------o----------S\n```\n\n\n`X` - points picked because `index%3=0`\n\n`S` – the first and the last points are always included.\n\n`E` – extremes.\n\n## `useChartData`\nIt's a bit advanced hook and contains information about current position of dot and corresponding values. Content of the result is changing often, so it's not worth deep documentation now.\n\n## TODO\nThe library has been released in a production-ready version. \nWe use it inside the [Rainbow.me project](https://rainbow.me/) so it's verified for use in production. \nHowever, it relies on [React Native Reanimated 2.0](https://docs.swmansion.com/react-native-reanimated/) in the alpha version thus it might not work perfectly. \nTest it deeply before using it. Until the stable release of Reanimated 2, I think it's worth not marking this library as stable.\nAlthough the library works with Reanimated without any changes, we faced a few issues related to our (quite advanced) usage of the library.\nThus we made some hacks we're not very proud of and it's for 99% something you should not do. However, if you see some crashes, you may try one of our hacks. \n\nThere're a few things left to make it polished regarding linear charts:\n- [ ] Support for gestures - pinching, swiping, etc.\n- [ ] more parameters regarding interpolation, smoothing, and animations (i.e. allow to override `springConfig` and `timingConfig`)\n\n## License\n\nReanimated library is licensed under [The MIT License](LICENSE). \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frainbow-me%2Freact-native-animated-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frainbow-me%2Freact-native-animated-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frainbow-me%2Freact-native-animated-charts/lists"}