{"id":5607,"date":"2020-10-04T16:24:00","date_gmt":"2020-10-04T16:24:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5607"},"modified":"2021-06-19T11:32:56","modified_gmt":"2021-06-19T11:32:56","slug":"animated-chart-components-for-react-native","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/animated-chart-components-for-react-native\/","title":{"rendered":"Animated Chart Components For React Native"},"content":{"rendered":"\n<h2>Description:<gwmw style=\"display:none;\"><gwmw style=\"display:none;\"><\/gwmw><\/gwmw><\/h2>\n\n\n\n<p>A set of components and helpers for building complex and beautifully animated charts in React Native apps.<gwmw style=\"display:none;\"><\/gwmw><\/p>\n\n\n\n<p>The library was designed to create aesthetic, animated (so far only linear) charts based on a given input.<\/p>\n\n\n\n<p>The main assumptions of the library were to create smooth transitions between subsequent data sets.<\/p>\n\n\n\n<figure class=\"wp-container-2 wp-block-gallery-1 wp-block-gallery columns-2 is-cropped\"><ul data-carousel-extra='{\"blog_id\":1,\"permalink\":\"https:\\\/\\\/azoora.com\\\/blog\\\/code\\\/animated-chart-components-for-react-native\\\/\"}' class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img data-attachment-id=\"5610\" data-permalink=\"https:\/\/azoora.com\/blog\/code\/animated-chart-components-for-react-native\/attachment\/animated-chart-components-for-react-native-ios\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-iOS.gif\" data-orig-size=\"600,1300\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Animated-Chart-Components-For-React-Native-iOS\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-iOS-138x300.gif\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-iOS-473x1024.gif\" loading=\"lazy\" width=\"473\" height=\"1024\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-iOS-473x1024.gif\" alt=\"\" data-id=\"5610\" data-full-url=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-iOS.gif\" data-link=\"https:\/\/azoora.com\/blog\/?attachment_id=5610#main\" class=\"wp-image-5610\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-iOS-473x1024.gif 473w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-iOS-138x300.gif 138w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img data-attachment-id=\"5608\" data-permalink=\"https:\/\/azoora.com\/blog\/code\/animated-chart-components-for-react-native\/attachment\/animated-chart-components-for-react-native-android\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-Android.gif\" data-orig-size=\"600,1200\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Animated-Chart-Components-For-React-Native-Android\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-Android-150x300.gif\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-Android-512x1024.gif\" loading=\"lazy\" width=\"512\" height=\"1024\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-Android-512x1024.gif\" alt=\"\" data-id=\"5608\" data-full-url=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-Android.gif\" data-link=\"https:\/\/azoora.com\/blog\/?attachment_id=5608#main\" class=\"wp-image-5608\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-Android-512x1024.gif 512w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native-Android-150x300.gif 150w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h2>Install &amp; Import:<gwmw style=\"display:none;\"><\/gwmw><\/h2>\n\n\n\n<pre class=\"wp-block-preformatted\"># NPM<br>$ npm i @rainbow-me\/animated-charts \u2013save<gwmw style=\"display:none;\"><\/gwmw><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \u2018react\u2019;<br>import {Dimensions, View} from \u2018react-native\u2019;<br>import {ChartDot, ChartPath, ChartPathProvider, monotoneCubicInterpolation} from \u2018@rainbow-me\/animated-charts\u2019;<gwmw style=\"display:none;\"><\/gwmw><\/pre>\n\n\n\n<h2><strong>Basic Usage:<\/strong><gwmw style=\"display:none;\"><\/gwmw><\/h2>\n\n\n\n<pre class=\"wp-block-preformatted\">export const {width: SIZE} = Dimensions.get('window');\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];\nconst points = monotoneCubicInterpolation(data)(40);\nconst BasicExample = () =&gt; (\n  &lt;View style={{ backgroundColor: 'black' }}&gt;\n    &lt;ChartPathProvider data={{ points, smoothingStrategy: 'bezier' }}&gt;\n      &lt;ChartPath height={SIZE \/ 2} stroke=\"yellow\" width={SIZE} \/&gt;\n      &lt;ChartDot style={{ backgroundColor: 'blue' }} \/&gt;\n    &lt;\/ChartPathProvider&gt;\n  &lt;\/View&gt;\n);<gwmw style=\"display:none;\"><\/gwmw><\/pre>\n\n\n\n<!--more-->\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Author<\/strong>: rainbow-me<gwmw style=\"display:none;\"><\/gwmw><\/p><p><strong>Official Page<\/strong>: <a href=\"https:\/\/github.com\/rainbow-me\/react-native-animated-charts\">GitHub<\/a><\/p><p><strong>License<\/strong>: MIT<\/p><p><strong>Demo<\/strong>: <a href=\"https:\/\/react-smooth-scrolling.netlify.app\/\">Link<\/a><\/p><p><strong>Download<\/strong>: <a href=\"https:\/\/github.com\/rainbow-me\/react-native-animated-charts\/archive\/master.zip\">Link<\/a><\/p><p><gwmw style=\"display:none;\"><\/gwmw><\/p><p><gwmw style=\"display:none;\"><gwmw style=\"display:none;\"><\/gwmw><\/gwmw><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Description: A set of components and helpers for building complex and beautifully animated charts in React Native apps. The library was designed to create aesthetic, animated (so far only linear) charts based on a given input. The main assumptions of the library were to create smooth transitions between subsequent data sets. Install &amp; Import: # [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145,12],"tags":[93,23,25,146,87,133],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Animated-Chart-Components-For-React-Native.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1sr","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5607"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5607"}],"version-history":[{"count":3,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5607\/revisions"}],"predecessor-version":[{"id":6258,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5607\/revisions\/6258"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5609"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}