{"id":21440659,"url":"https://github.com/malaa-tech/react-native-simple-line-chart","last_synced_at":"2026-02-11T11:01:30.788Z","repository":{"id":65681330,"uuid":"588913912","full_name":"Malaa-tech/react-native-simple-line-chart","owner":"Malaa-tech","description":"A fast, interactive and simple line chart component for React Native 📈","archived":false,"fork":false,"pushed_at":"2026-02-10T11:51:14.000Z","size":1756,"stargazers_count":89,"open_issues_count":3,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-02-10T15:52:26.157Z","etag":null,"topics":["android","chart","ios","line","react-native","reanimated","reanimated3"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-simple-line-chart","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/Malaa-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-01-14T13:12:08.000Z","updated_at":"2026-01-02T22:54:17.000Z","dependencies_parsed_at":"2023-11-13T23:25:39.056Z","dependency_job_id":"5eed3f01-c764-417f-8325-0b20b5d39d9f","html_url":"https://github.com/Malaa-tech/react-native-simple-line-chart","commit_stats":null,"previous_names":[],"tags_count":66,"template":false,"template_full_name":null,"purl":"pkg:github/Malaa-tech/react-native-simple-line-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Freact-native-simple-line-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Freact-native-simple-line-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Freact-native-simple-line-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Freact-native-simple-line-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Malaa-tech","download_url":"https://codeload.github.com/Malaa-tech/react-native-simple-line-chart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Freact-native-simple-line-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29332292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T06:13:03.264Z","status":"ssl_error","status_checked_at":"2026-02-11T06:12:55.843Z","response_time":97,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","chart","ios","line","react-native","reanimated","reanimated3"],"created_at":"2024-11-23T01:17:16.652Z","updated_at":"2026-02-11T11:01:30.766Z","avatar_url":"https://github.com/Malaa-tech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![License](http://img.shields.io/badge/license-MIT-green.svg?style=flat)](https://github.com/Malaa-tech/react-native-simple-line-chart)\n\n# React Native Simple Line Chart\nA simple, interactive, animated, and fast Line Chart component for React Native.\n\n### 🦄 Features\n- ✅  Supports RTL languages   \n- ✅  Customizable active point component  \n- ✅  Linear gradient line color  \n- ✅  Supports different curve types  \n- ✅  Full utilization of reanimated and shared values  \n- ✅  Supports area chart presentation\n- ✅  Supports transition animations\n \n### How we use it in Malaa App\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/Malaa-tech/react-native-simple-line-chart/assets/24798045/c48c7ace-8230-4363-843c-1d250fc22110\" width=\"300\"/\u003e\n\u003cimg src=\"https://github.com/Malaa-tech/react-native-simple-line-chart/assets/24798045/74aa91d3-e69c-4a85-8d62-d6a77be550d2\" width=\"320\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/24798045/216769372-9d8dc695-71f9-488d-8bba-e804de9dc5ba.gif\" width=\"270\"/\u003e\n\u003c/p\u003e\n\n\n### 🔮 Example App Demo\n- run it your self using ```yarn example [ios/andriod]``` or watch this [Video](https://user-images.githubusercontent.com/24798045/216169227-8044461f-9d2d-4990-b3aa-c15e2b3464e2.mp4)\n\n## 📦 Installation\n```bash | pure\nnpm install react-native-simple-line-chart\n```\nor\n```bash | pure\nyarn add react-native-simple-line-chart\n```\n⚠️ Make sure you have [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) + [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) + [react-native-svg](https://github.com/software-mansion/react-native-svg) installed in your project.\n\n\n## ⚒️ Usage\n```tsx | pure\nimport * as React from 'react';\nimport { View, Dimensions, Text } from 'react-native';\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\nimport LineChart from 'react-native-simple-line-chart';\n\nexport default function App() {\n  return (\n    \u003cGestureHandlerRootView style={{ flex: 1 }}\u003e\n      \u003cView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}\u003e\n        \u003cLineChart\n          lines={[\n            {\n              data: [\n                {\n                  y: 10,\n                  x: new Date('2020-01-01').getTime(),\n                  extraData: {\n                    formattedValue: '0',\n                    formattedTime: '2020-01-01',\n                  },\n                },\n                {\n                  y: 20,\n                  x: new Date('2020-01-02').getTime(),\n                  extraData: {\n                    formattedValue: '20',\n                    formattedTime: '2020-01-02',\n                  },\n                },\n                {\n                  y: 15,\n                  x: new Date('2020-01-03').getTime(),\n                  extraData: {\n                    date: new Date('2020-01-03').getTime(),\n                    formattedValue: '15$',\n                    formattedTime: '2020-01-03',\n                  },\n                },\n                {\n                  y: 35,\n                  x: new Date('2020-01-04').getTime(),\n                  extraData: {\n                    formattedValue: '35$',\n                    formattedTime: '2020-01-04',\n                  },\n                },\n                {\n                  y: 5,\n                  x: new Date('2020-01-06').getTime(),\n                  extraData: {\n                    formattedValue: '35$',\n                    formattedTime: '2020-01-04',\n                  },\n                },\n              ],\n              activePointConfig: {\n                color: 'black',\n                showVerticalLine: true,\n              },\n              lineColor: 'pink',\n              curve: 'linear',\n              endPointConfig: {\n                color: 'pink',\n                radius: 5,\n                animated: true,\n              },\n              activePointComponent: (point) =\u003e {\n                return (\n                  \u003cView\n                    style={{\n                      backgroundColor: 'pink',\n                      padding: 10,\n                      borderRadius: 10,\n                    }}\n                  \u003e\n                    \u003cText style={{ color: 'white' }}\u003e\n                      {point?.extraData?.formattedValue}\n                    \u003c/Text\u003e\n                    \u003cText style={{ color: 'white' }}\u003e\n                      {point?.extraData?.formattedTime}\n                    \u003c/Text\u003e\n                  \u003c/View\u003e\n                );\n              },\n            },\n          ]}\n          backgroundColor={undefined}\n          height={200}\n          width={Dimensions.get('screen').width}\n        /\u003e\n      \u003c/View\u003e\n    \u003c/GestureHandlerRootView\u003e\n  );\n}\n```\n\n## 📖 Docs \n[Click here for docs and type defs](https://github.com/Malaa-tech/react-native-simple-line-chart/blob/main/docs/globals.md)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalaa-tech%2Freact-native-simple-line-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmalaa-tech%2Freact-native-simple-line-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalaa-tech%2Freact-native-simple-line-chart/lists"}