# wrn-echarts > Echarts for react native. Latest version **0.1.6** (published 2023-03-06) · Apache-2.0 license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install wrn-echarts pnpm add wrn-echarts yarn add wrn-echarts bun add wrn-echarts ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 0.1.6 | | Published | 2023-03-06 | | First published | 2022-12-01 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >= 16.0.0 | | Dependencies | 2 | | Unpacked size | 128.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 967 | | Author | wuba | | Maintainers | shinken008, wuba_fe | | Keywords | react-native, ios, android | ## Links - npm: https://www.npmjs.com/package/wrn-echarts - Repository: https://github.com/wuba/wrn-echarts - Homepage: https://github.com/wuba/wrn-echarts#readme - Issues: https://github.com/wuba/wrn-echarts/issues - npm.io page: https://npm.io/package/wrn-echarts ## Dependencies (2) - [entities](https://npm.io/package/entities.md) ^4.4.0 - [@xmldom/xmldom](https://npm.io/package/@xmldom/xmldom.md) ^0.8.6 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 0.1.6 (latest) — 2023-03-06 - 0.1.6-all.0 (all) — 2023-03-06 - 0.1.6-alpha.5 (alpha) — 2023-03-02 - 0.1.5-all.0 — 2023-03-02 - 0.1.6-alpha.4 — 2023-03-02 - 0.1.6-alpha.3 — 2023-03-02 - 0.1.6-alpha.2 — 2023-03-02 - 0.1.6-alpha.1 — 2023-03-02 - 0.1.6-alpha.0 — 2023-02-28 - 0.1.5 — 2023-02-20 - 0.1.4 — 2023-01-31 - 0.1.3 — 2023-01-09 - 0.1.3-alpha.0 — 2023-01-09 - 0.1.2 — 2022-12-02 - 0.1.1 — 2022-12-02 - … 1 more at https://npm.io/package/wrn-echarts/versions ## README # wrn-echarts [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). Much better performance than webview based solution. Checkout the full documentation [here](https://wuba.github.io/react-native-echarts/). ## About * 🔥 The same way as Apache ECharts * 🎨 Rich charts, covering almost all usage scenarios * ✨ Optional rendering library, [Skia](https://github.com/shopify/react-native-skia) or [SVG](https://github.com/software-mansion/react-native-svg) * 🚀 Able to reuse code with web * 📱 Support for zoom gestures ## Installation ```sh yarn add wrn-echarts echarts ``` Install [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. > The latest versions of echarts, react-native-svg and react-native-skia are recommended ## Usage ![example](https://raw.githubusercontent.com/wuba/wrn-echarts/main/screenshots/example.jpg) Most 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. ### Skia echarts ```js // import { SkiaChart, SVGRenderer } from 'wrn-echarts'; import SkiaChart, { SVGRenderer } from 'wrn-echarts/skiaChart'; import * as echarts from 'echarts/core'; import { useRef, useEffect } from 'react'; import { BarChart, } from 'echarts/charts'; import { TitleComponent, TooltipComponent, GridComponent, } from 'echarts/components'; // register extensions echarts.use([ TitleComponent, TooltipComponent, GridComponent, SVGRenderer, // ... BarChart, ]) const E_HEIGHT = 250; const E_WIDTH = 300; // initial function SkiaComponent({ option }) { const skiaRef = useRef(null); useEffect(() => { let chart: any; if (skiaRef.current) { // @ts-ignore chart = echarts.init(skiaRef.current, 'light', { renderer: 'svg', width: E_WIDTH, height: E_HEIGHT, }); chart.setOption(option); } return () => chart?.dispose(); }, [option]); return ; } // Component usage export default function App() { const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', }, ], } return } ``` ### SVG echarts ```js // import { SvgChart, SVGRenderer } from 'wrn-echarts'; import SvgChart, { SVGRenderer } from 'wrn-echarts/svgChart'; import * as echarts from 'echarts/core'; import { useRef, useEffect } from 'react'; import { BarChart, } from 'echarts/charts'; import { TitleComponent, TooltipComponent, GridComponent, } from 'echarts/components'; // register extensions echarts.use([ TitleComponent, TooltipComponent, GridComponent, SVGRenderer, // ... BarChart, ]) const E_HEIGHT = 250; const E_WIDTH = 300; // initial function SvgComponent({ option }) { const svgRef = useRef(null); useEffect(() => { let chart: any; if (svgRef.current) { // @ts-ignore chart = echarts.init(svgRef.current, 'light', { renderer: 'svg', width: E_WIDTH, height: E_HEIGHT, }); chart.setOption(option); } return () => chart?.dispose(); }, [option]); return ; } // Component usage export default function App() { const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', }, ], } return } ``` ### Use only one of SvgChart or SkiaChart ```js import SvgChart, { SVGRenderer } from 'wrn-echarts/svgChart'; ``` or ```js import SkiaChart, { SVGRenderer } from 'wrn-echarts/skiaChart'; ``` ## Contributing See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. ## License Apache-2.0 --- Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) --- _Source: https://npm.io/package/wrn-echarts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._