{"id":13531583,"url":"https://github.com/wuba/react-native-echarts","last_synced_at":"2026-01-12T02:23:10.525Z","repository":{"id":65552993,"uuid":"586749482","full_name":"wuba/react-native-echarts","owner":"wuba","description":"📈 React Native ECharts Library: An awesome charting library for React Native, built upon Apache ECharts and leveraging react-native-svg and react-native-skia. Offers significantly better performance compared to WebView-based solutions.","archived":false,"fork":false,"pushed_at":"2025-11-27T06:29:06.000Z","size":236757,"stargazers_count":910,"open_issues_count":47,"forks_count":33,"subscribers_count":20,"default_branch":"main","last_synced_at":"2025-11-29T22:51:26.532Z","etag":null,"topics":["android","app","chart","charts","echarts","ios","react","react-native","skia","svg"],"latest_commit_sha":null,"homepage":"https://wuba.github.io/react-native-echarts/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wuba.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":"NOTICE","maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-01-09T06:12:24.000Z","updated_at":"2025-11-29T20:00:52.000Z","dependencies_parsed_at":"2024-02-02T10:26:45.223Z","dependency_job_id":"c29aa72b-1f28-44e6-b523-0969494e711b","html_url":"https://github.com/wuba/react-native-echarts","commit_stats":{"total_commits":127,"total_committers":15,"mean_commits":8.466666666666667,"dds":0.7401574803149606,"last_synced_commit":"bce55046e1c275a925fbe123dcd10eb6358b0a6c"},"previous_names":["wuba/wrn-echarts"],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/wuba/react-native-echarts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuba%2Freact-native-echarts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuba%2Freact-native-echarts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuba%2Freact-native-echarts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuba%2Freact-native-echarts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wuba","download_url":"https://codeload.github.com/wuba/react-native-echarts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuba%2Freact-native-echarts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28332112,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","app","chart","charts","echarts","ios","react","react-native","skia","svg"],"created_at":"2024-08-01T07:01:04.130Z","updated_at":"2026-01-12T02:23:10.510Z","avatar_url":"https://github.com/wuba.png","language":"TypeScript","funding_links":[],"categories":["Frameworks","TypeScript"],"sub_categories":["React Native Component"],"readme":"[![](./logo.svg)](https://wuba.github.io/react-native-echarts/)\n=\n\n[![npm version](https://img.shields.io/npm/v/@wuba/react-native-echarts.svg?style=flat)](https://www.npmjs.com/package/@wuba/react-native-echarts)\n[![npm downloads](https://img.shields.io/npm/dm/@wuba/react-native-echarts)](https://www.npmjs.com/package/@wuba/react-native-echarts)\n[![codecov](https://codecov.io/gh/wuba/react-native-echarts/graph/badge.svg?token=BF6LGEXO55)](https://codecov.io/gh/wuba/react-native-echarts)\n[![issues](https://img.shields.io/github/issues/wuba/react-native-echarts.svg?style=flat)](https://github.com/wuba/react-native-echarts/issues)\n[![GitHub contributors](https://img.shields.io/github/contributors/wuba/react-native-echarts.svg?style=flat)](https://github.com/wuba/react-native-echarts/graphs/contributors)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/wuba/react-native-echarts/pulls)\n[![license](https://img.shields.io/github/license/wuba/react-native-echarts.svg?style=flat)](https://github.com/wuba/react-native-echarts/blob/main/LICENSE)\n\n[简体中文](./README_CN.md) | [English](./README.md) | [日本語](./README_JP.md) | [繁體中文](./README_TW.md)\n\n[React Native](https://reactnative.dev/) version of [Apache Echarts](https://github.com/apache/echarts), based on [react-native-svg](https://github.com/software-mansion/react-native-svg) and [react-native-skia](https://github.com/shopify/react-native-skia). This awesome library offers significantly improved performance compared to WebView-based solutions.\n\nCheckout the full documentation [here](https://wuba.github.io/react-native-echarts/).\n\n## About\n\n* 🔥 The same usage as Apache ECharts\n* 🎨 Rich charts, covering almost all usage scenarios\n* ✨ Optional rendering library: [Skia](https://github.com/shopify/react-native-skia) or [SVG](https://github.com/software-mansion/react-native-svg)\n* 🚀 Reusable code with web\n* 📱 Support gestures such as tapping, dragging and zooming\n\n## Installation\n\n```sh\nyarn add @wuba/react-native-echarts echarts\n```\n\nInstall [react-native-svg](https://github.com/software-mansion/react-native-svg#installation) or [react-native-skia](https://shopify.github.io/react-native-skia/docs/getting-started/installation/) according to your needs.\n\n\u003e The latest versions of echarts, react-native-svg, and react-native-skia are recommended\n\n## Usage\n\n![example](https://raw.githubusercontent.com/wuba/react-native-echarts/main/screenshots/example.jpg)\n\nMost of the charts in ECharts are supported, and the usage remains largely consistent. For more use cases and demo previews, you can download the [Taro Playground](https://github.com/wuba/taro-playground) app.\n\n### Example\n```js\n// Choose your preferred renderer\n// import { SkiaChart, SVGRenderer } from '@wuba/react-native-echarts';\nimport { SvgChart, SVGRenderer } from '@wuba/react-native-echarts';\nimport * as echarts from 'echarts/core';\nimport { useRef, useEffect } from 'react';\nimport {\n  BarChart,\n} from 'echarts/charts';\nimport {\n  TitleComponent,\n  TooltipComponent,\n  GridComponent,\n} from 'echarts/components';\n\n// Register extensions\necharts.use([\n  TitleComponent,\n  TooltipComponent,\n  GridComponent,\n  SVGRenderer,\n  // ...\n  BarChart,\n])\n\nconst E_HEIGHT = 250;\nconst E_WIDTH = 300;\n\n// Initialize\nfunction ChartComponent({ option }) {\n  const chartRef = useRef\u003cany\u003e(null);\n\n  useEffect(() =\u003e {\n    let chart: any;\n    if (chartRef.current) {\n      // @ts-ignore\n      chart = echarts.init(chartRef.current, 'light', {\n        renderer: 'svg',\n        width: E_WIDTH,\n        height: E_HEIGHT,\n      });\n      chart.setOption(option);\n    }\n    return () =\u003e chart?.dispose();\n  }, [option]);\n\n  // Choose your preferred chart component\n  // return \u003cSkiaChart ref={chartRef} /\u003e;\n  return \u003cSvgChart ref={chartRef} /\u003e;\n}\n\n// Component usage\nexport default function App() {\n  const option = {\n    xAxis: {\n      type: 'category',\n      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n    },\n    yAxis: {\n      type: 'value',\n    },\n    series: [\n      {\n        data: [120, 200, 150, 80, 70, 110, 130],\n        type: 'bar',\n      },\n    ],\n  }\n  return \u003cChartComponent option={option} /\u003e\n}\n```\n\n### Use only one of SvgChart or SkiaChart\n```js\nimport SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';\n```\nor\n```js\nimport SkiaChart, { SkiaRenderer } from '@wuba/react-native-echarts/skiaChart';\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## Contributors\n\nThis project exists thanks to all the people who contribute:\n\n[![](https://opencollective.com/react-native-echarts/contributors.svg?width=890\u0026showBtn=false)](https://github.com/wuba/react-native-echarts/graphs/contributors)\n\n## License\n\nApache-2.0\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwuba%2Freact-native-echarts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwuba%2Freact-native-echarts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwuba%2Freact-native-echarts/lists"}