{"id":4268,"url":"https://github.com/tomLadder/react-native-echarts-wrapper","last_synced_at":"2025-08-04T01:31:49.801Z","repository":{"id":33113246,"uuid":"152082520","full_name":"tomLadder/react-native-echarts-wrapper","owner":"tomLadder","description":"📈Powerful React-Native ECharts Wrapper 📊","archived":false,"fork":false,"pushed_at":"2023-02-27T20:55:38.000Z","size":3580,"stargazers_count":176,"open_issues_count":44,"forks_count":63,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-12-01T21:04:49.429Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","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/tomLadder.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2018-10-08T13:13:49.000Z","updated_at":"2024-10-25T07:56:21.000Z","dependencies_parsed_at":"2024-01-08T01:02:41.985Z","dependency_job_id":"f2e880d7-5d05-499b-b997-8612e712dda0","html_url":"https://github.com/tomLadder/react-native-echarts-wrapper","commit_stats":{"total_commits":52,"total_committers":7,"mean_commits":7.428571428571429,"dds":0.3846153846153846,"last_synced_commit":"7931402f11788f602f5f9548cbd43a111726f6c3"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomLadder%2Freact-native-echarts-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomLadder%2Freact-native-echarts-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomLadder%2Freact-native-echarts-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomLadder%2Freact-native-echarts-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomLadder","download_url":"https://codeload.github.com/tomLadder/react-native-echarts-wrapper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228582487,"owners_count":17940587,"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":[],"created_at":"2024-01-05T20:17:06.369Z","updated_at":"2024-12-07T08:30:27.450Z","avatar_url":"https://github.com/tomLadder.png","language":"HTML","readme":"\u003cp align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/tomLadder/react-native-echarts-wrapper/develope/images/echarts.png\" alt=\"ECharts\" width=\"200\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n  \u003ch1 align=\"center\"\u003ereact-native-echarts-wrapper v2.0.0\u003c/h1\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003ch4 align=\"center\"\u003eApache ECharts (incubating) wrapper build for \u003ca href=\"https://facebook.github.io/react-native/\" target=\"_blank\"\u003eReact Native\u003c/a\u003e/\u003ca href=\"https://expo.io/learn\" target=\"_blank\"\u003eExpo\u003c/a\u003e.\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://forthebadge.com/images/badges/built-with-love.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://forthebadge.com/images/badges/uses-html.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://forthebadge.com/images/badges/fuck-it-ship-it.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n[![Build Status](https://travis-ci.org/tomLadder/react-native-echarts-wrapper.svg?branch=master)](https://travis-ci.org/tomLadder/react-native-echarts-wrapper)\n[![Coverage Status](https://coveralls.io/repos/github/tomLadder/react-native-echarts-wrapper/badge.svg?branch=master)](https://coveralls.io/github/tomLadder/react-native-echarts-wrapper?branch=master)\n[![npm version](https://badge.fury.io/js/react-native-echarts-wrapper.svg)](https://badge.fury.io/js/react-native-echarts-wrapper)\n![npm](https://img.shields.io/npm/dt/react-native-echarts-wrapper.svg)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#screenshots\"\u003eScreenshots\u003c/a\u003e •\n  \u003ca href=\"#how-to-use\"\u003eHow To Use\u003c/a\u003e •\n  \u003ca href=\"#authors\"\u003eAuthors\u003c/a\u003e\n\u003c/p\u003e\n\n![screenshot](https://raw.githubusercontent.com/tomLadder/react-native-echarts-wrapper/develope/images/dynamic.png)\n\n### A React Native wrapper for the popular echarts charting framework. With this library you can create complex, interactive charts with great performance on mobile devices.\n\nThe fact that the charting framework purely runs in a webview makes it very stable to upcomming React-Native versions. On the other hand it is not easy to make a two way data communication between the chart (running in the webview Javascript thread) and the React-Native Javascript thread. With this library you can even build the more complex chart options of \u003ca href=\"https://ecomfe.github.io/echarts-examples/public/index.html\" target=\"_blank\"\u003eecharts\u003c/a\u003e. You can inject custom javascript code within the webview which allows you to access the chart api (detect taps, selections etc...)\n\n# Screenshots\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/tomLadder/react-native-echarts-wrapper/master/images/custom.png\" width=\"200\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/tomLadder/react-native-echarts-wrapper/master/images/custom_rn_handler.png\" width=\"200\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/tomLadder/react-native-echarts-wrapper/master/images/simple.png\" width=\"200\"\u003e\n\u003c/p\u003e\n\n# How To Use\n\n```bash\n$ yarn add react-native-echarts-wrapper\n```\n\nMake sure you installed \u003ca href=\"https://github.com/react-native-community/react-native-webview\" target=\"_blank\"\u003ereact-native-webview\u003c/a\u003e\n\n# Supported Versions\n\n| Version | Expo    | React-Native |\n| ------- | ------- | ------------ |\n| 2.x.x   | \u003e= 0.33 | \u003e= 0.58      |\n| 1.x.x   | /       | \u003e= 0.56      |\n\n# Properties\n\n| Name               | Type   | Example                            | Description                                                                                                                                                                                                                                                  |\n| ------------------ | ------ | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| option             | object | take a look at the examples        | Allows you to set the chart configuration (https://ecomfe.github.io/echarts-examples/public/index.html). Never access anything related to your React-Native Javascript code within the options object. It won't work! Take a look at `onData` and `sendData` |\n| customTemplatePath | string | file:///android_assets/index.html  | Use this property if you want to tell echarts where to look for a custom html template. You can use \u003ca href=\"https://github.com/itinance/react-native-fs\" target=\"_blank\"\u003eRNFS\u003c/a\u003e to get the directory path for Android/iOS.                                |\n| additionalCode     | string | `alert('hello world');`            | Allows you to inject javascript code in the webview. It is used to access the echarts api to create more complex charts (e.G. callback on chart tap). Take a look at \u003ca href=\"#more-complex-example\"\u003eMore complex example\u003c/a\u003e                                |\n| backgroundColor    | string | rgba(255,101,80,0.4), red, #4287f5 | Set the background color of the chart                                                                                                                                                                                                                        |\n\n# Methods / Callbacks\n\n| Name               | Example                                              | Description                                                                                                                                                                                                                                                                                                                                                                                            |\n| ------------------ | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| setOption          | `this.chart.setOption(option);`                      | Allows you to set a chart configuration dyanmically (e.g. after initial setup with option prop). Take a look at \u003ca href=\"#dynamic-loading-example\"\u003eDynamic loading example\u003c/a\u003e                                                                                                                                                                                                                         |\n| getOption          | `this.chart.getOption((data) =\u003e console.log(data));` | Allows you to get the current option of a chart instance. First parameter is the result-callback. If you don't pass a second parameter the result-callback will be triggered with all option properties. Second parameter is an array of the e-charts-option-properties (e.g. `['dataZoom', 'series']`) you want to get. Take a look at \u003ca href=\"#dynamic-loading-example\"\u003eDynamic loading example\u003c/a\u003e |\n| clear              | `this.chart.clear();`                                | Allows you to clear the chart. Take a look at \u003ca href=\"#more-complex-example\"\u003eMore complex example\u003c/a\u003e                                                                                                                                                                                                                                                                                                 |\n| onData             | `\u003cECharts onData={this.onData} /\u003e`                   | This is the only way to receive data from the chart. It is called with the data provided by sendData (Webview functions).                                                                                                                                                                                                                                                                              |\n| setBackgroundColor | `this.chart.setBackgroundColor('#ecf542');`          | Allows you to set the background color of the chart.                                                                                                                                                                                                                                                                                                                                                   |\n\n# Webview functions\n\nThese functions can be called from code injected with `additionalCode` or within the echarts option.\n\n| Name     | Example                   | Description                                                                                                                                                                                                                                                            |\n| -------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| sendData | `sendData('Hello World')` | With this function you can communicate with React Native. **Attention** you can only send strings over to React-Native. `sendData('Hello World')` will call `onData` on the React Native side. Take a look at \u003ca href=\"#more-complex-example\"\u003eMore complex example\u003c/a\u003e |\n\n# Webview variables\n\n| Name  | Example          | Description                                                                                                                                                                             |\n| ----- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| chart | `chart.on(....)` | Allows you to access the echarts api (https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance). Take a look at \u003ca href=\"#more-complex-example\"\u003eMore complex example\u003c/a\u003e |\n\n## Simple example\n\n```js\nimport React, { Component } from \"react\";\nimport { StyleSheet, View } from \"react-native\";\nimport { ECharts } from \"react-native-echarts-wrapper\";\n\nexport default class App extends Component {\n  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: [820, 932, 901, 934, 1290, 1330, 1320],\n        type: \"line\"\n      }\n    ]\n  };\n\n  render() {\n    return (\n      \u003cView style={styles.chartContainer}\u003e\n        \u003cECharts\n          option={this.option}\n          backgroundColor=\"rgba(93, 169, 81, 0.3)\"\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  chartContainer: {\n    flex: 1\n  }\n});\n```\n\n## More complex example\n\n```js\nimport React, { Component } from \"react\";\nimport { StyleSheet, SafeAreaView, Button } from \"react-native\";\nimport { ECharts } from \"react-native-echarts-wrapper\";\n\nexport default class App extends Component {\n  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: [820, 932, 901, 934, 1290, 1330, 1320],\n        type: \"line\"\n      }\n    ]\n  };\n\n  additionalCode = `\n        chart.on('click', function(param) {\n            var obj = {\n            type: 'event_clicked',\n            data: param.data\n            };\n\n            sendData(JSON.stringify(obj));\n        });\n    `;\n\n  onData = param =\u003e {\n    const obj = JSON.parse(param);\n\n    if (obj.type === \"event_clicked\") {\n      alert(`you tapped the chart series: ${obj.data}`);\n    }\n  };\n\n  onRef = ref =\u003e {\n    if (ref) {\n      this.chart = ref;\n    }\n  };\n\n  onButtonClearPressed = () =\u003e {\n    this.chart.clear();\n  };\n\n  render() {\n    return (\n      \u003cSafeAreaView style={styles.chartContainer}\u003e\n        \u003cButton title=\"Clear\" onPress={this.onButtonClearPressed} /\u003e\n\n        \u003cECharts\n          ref={this.onRef}\n          option={this.option}\n          additionalCode={this.additionalCode}\n          onData={this.onData}\n          onLoadEnd={() =\u003e {\n            this.chart.setBackgroundColor(\"rgba(93, 169, 81, 0.1)\");\n          }}\n        /\u003e\n      \u003c/SafeAreaView\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  chartContainer: {\n    flex: 1,\n    backgroundColor: \"#F5FCFF\"\n  }\n});\n```\n\n## Dynamic loading example\n\n```js\nimport React, { Component } from \"react\";\nimport { StyleSheet, SafeAreaView, Button } from \"react-native\";\nimport { ECharts } from \"react-native-echarts-wrapper\";\n\nexport default class App extends Component {\n  onRef = ref =\u003e {\n    if (ref) {\n      this.chart = ref;\n    }\n  };\n\n  onData = param =\u003e {};\n\n  initChart = () =\u003e {\n    function randomData() {\n      now = new Date(+now + oneDay);\n      value = value + Math.random() * 21 - 10;\n      return {\n        name: now.toString(),\n        value: [\n          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join(\"/\"),\n          Math.round(value)\n        ]\n      };\n    }\n\n    var data = [];\n    var now = +new Date(1997, 9, 3);\n    var oneDay = 24 * 3600 * 1000;\n    var value = Math.random() * 1000;\n    for (var i = 0; i \u003c 1000; i++) {\n      data.push(randomData());\n    }\n\n    option = {\n      title: {\n        text: \"Dynamic Chart\"\n      },\n      tooltip: {\n        trigger: \"axis\",\n        formatter: function(params) {\n          params = params[0];\n          var date = new Date(params.name);\n          return (\n            date.getDate() +\n            \"/\" +\n            (date.getMonth() + 1) +\n            \"/\" +\n            date.getFullYear() +\n            \" : \" +\n            params.value[1]\n          );\n        },\n        axisPointer: {\n          animation: false\n        }\n      },\n      xAxis: {\n        type: \"time\",\n        splitLine: {\n          show: false\n        }\n      },\n      yAxis: {\n        type: \"value\",\n        boundaryGap: [0, \"100%\"],\n        splitLine: {\n          show: false\n        }\n      },\n      series: [\n        {\n          type: \"line\",\n          showSymbol: false,\n          hoverAnimation: false,\n          data: data\n        }\n      ]\n    };\n\n    this.chart.setOption(option);\n\n    //no query parameter: whole option object\n    this.chart.getOption(option =\u003e {\n      console.log(option);\n    });\n\n    //with query parameter\n    this.chart.getOption(\n      option =\u003e {\n        console.log(option);\n      },\n      [\"dataZoom\", \"series\"]\n    );\n\n    const instance = this.chart;\n\n    setInterval(function() {\n      for (var i = 0; i \u003c 5; i++) {\n        data.shift();\n        data.push(randomData());\n      }\n\n      instance.setOption({\n        series: [\n          {\n            data: data\n          }\n        ]\n      });\n    }, 100);\n  };\n\n  render() {\n    return (\n      \u003cSafeAreaView style={styles.chartContainer}\u003e\n        \u003cButton title=\"Start\" onPress={this.initChart} /\u003e\n\n        \u003cECharts\n          option={{}}\n          ref={this.onRef}\n          additionalCode={this.additionalCode}\n          onData={this.onData}\n        /\u003e\n      \u003c/SafeAreaView\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  chartContainer: {\n    flex: 1,\n    backgroundColor: \"#F5FCFF\"\n  }\n});\n```\n\n## [2.0.0] - Thursday, 03.October 2019\n\n### Breaking Changes\n\n- removed property canvas (canvas renderer default)\n- removed legacyMode (\u003ca href=\"https://github.com/react-native-community/react-native-webview\"\u003ereact-native-webview\u003c/a\u003e required)\n- removed baseUrl\n\n### Added\n\n- customTemplatePath prop allows to set the path to a custom html-file (template: node_modules/react-native-echarts-wrapper/dist/index.html)\n\n### Fixed\n\n- Tried to register two views with the same name RNCWebView? (\u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper/issues/35\" target=\"_blank\"\u003e#35\u003c/a\u003e)\n- Got rejected from Apple review (\u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper/issues/31\" target=\"_blank\"\u003e#31\u003c/a\u003e)\n- usage on expo as there is no android_asset folder (\u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper/issues/19\" target=\"_blank\"\u003e#19\u003c/a\u003e)\n- cannot use '\\n' in custom format text (\u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper/issues/14\" target=\"_blank\"\u003e#14\u003c/a\u003e)\n\n## [1.4.7] - Thursday, 12.September 2019\n\n### Fixed\n\n- Variables and functions from injectedJavaScript not available on Android (\u003ca href=\"https://github.com/react-native-community/react-native-webview/issues/554\" target=\"_blank\"\u003esee react-native issue\u003c/a\u003e)\n\n## [1.4.5] - Saturday, 17.August 2019\n\n### Added\n\n- Loading state/Background Color (\u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper/issues/17\" target=\"_blank\"\u003e#17\u003c/a\u003e)\n\n## [1.4.4] - Thursday, 08.August 2019\n\n### Fixed\n\n- postMessage double-encoded iOS RN 0.59.x (\u003ca href=\"https://github.com/facebook/react-native/issues/25266\" target=\"_blank\"\u003esee react-native issue\u003c/a\u003e)\n\n## [1.4.3] - Tuesday, 06.August 2019\n\n### Fixed\n\n- Broken on React Native \u003e= 0.60.0 (Invariant Violation: Element type is invalid) (\u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper/issues/27\" target=\"_blank\"\u003e#27\u003c/a\u003e)\n\n## [1.4.2] - Wednesday, 31.July 2019\n\n### Fixed\n\n- fix arrow function not working on old version Android webview (\u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper/pull/25\" target=\"_blank\"\u003e#25\u003c/a\u003e)\n\n## [1.4.1] - Tuesday, 25.June 2019\n\n### Fixed\n\n- Dynamic loading issue on iOS (\u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper/issues/16\" target=\"_blank\"\u003e#16\u003c/a\u003e)\n\n## [1.4.0] - Monday, 20.May 2019\n\n### Fixed\n\n- Doesn't work on iOS in Expo (\u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper/issues/13\" target=\"_blank\"\u003e#13\u003c/a\u003e)\n\n### Added\n\n- canvas \u0026 legacyMode\n\n## [1.3.0] - Thursday, 18.Apr 2019\n\n### Added\n\n- tests, coverage, build report\n\n### Fixed\n\n- Blank page on Android (\u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper/issues/10\" target=\"_blank\"\u003e#10\u003c/a\u003e)\n\n## [1.2.2] - Monday, 18.Feb 2019\n\n### Fixed\n\n- crash when not passing an option\n\n## [1.2.1] - Wednesday, 16.Jan 2019\n\n### Added\n\n- getOption (\u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper/issues/4\" target=\"_blank\"\u003e#4\u003c/a\u003e)\n\n## [1.1.1] - Tuesday, 27.Nov 2018\n\n### Fixed\n\n- Documentation missing (\u003ca href=\"https://github.com/tomLadder/react-native-echarts-wrapper/issues/3\" target=\"_blank\"\u003e#3\u003c/a\u003e)\n\n## [1.1.0] - Saturday, 17.Nov 2018\n\n### Added\n\n- baseUrl prop allows to access local content within the Webview on iOS and Android\n- additionalCode prop allows to create more complex chart configurations (e.G. `chart.on('click'`)\n\n## [1.0.4] - Monday, 5.Nov 2018\n\n### Fixed\n\n- Functions in options do not work when setting via 'setOptions'\n\n# Authors\n\n[\u003cimg alt=\"Thomas Leiter\" src=\"https://avatars3.githubusercontent.com/u/20393156?s=400\u0026u=ae0a43de5d81d58a698abffe4e2ede024f2b6700\u0026v=4\" width=\"117\"\u003e](https://github.com/tomLadder) |\n:---:\n|[Thomas Leiter](https://github.com/tomLadder)|\n\n## Contributors\n\n[\u003cimg alt=\"Stefan Papst\" src=\"https://avatars3.githubusercontent.com/u/11005451?s=400\u0026v=4\" width=\"50\"\u003e](https://github.com/papsti7) |\n:---:\n|[Stefan Papst](https://github.com/tomLadder)|\n\nSee also the list of [contributors](https://github.com/tomLadder/react-native-echarts-wrapper/settings/collaboration) who participated in this project.\n","funding_links":[],"categories":["Components","Frameworks"],"sub_categories":["UI","React Native Component"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FtomLadder%2Freact-native-echarts-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FtomLadder%2Freact-native-echarts-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FtomLadder%2Freact-native-echarts-wrapper/lists"}