Skip to content

README.md

Latest commit

 

History

History
370 lines (317 loc) · 15.9 KB

README.md

File metadata and controls

370 lines (317 loc) · 15.9 KB

@wavemaker/react-native-echarts

npm package MIT License

npm downloads TypeScript Storybook

React Native chart components built with ECharts (via @wuba/react-native-echarts) and Skia. Works with Expo and bare React Native. Visit storybook at https://wavemaker.github.io/wm-react-native-echarts for more details on how to use and examples.

Installation

Install the package from npm:

npm install @wavemaker/react-native-echarts

The library declares peer dependencies. Add any your app does not already include (align versions with your React Native or Expo SDK):

npm install @shopify/react-native-skia @wuba/react-native-echarts echarts zrender react-native-svg

react and react-native are also peers; they should already be present in your app.

Chart gallery

Preview thumbnails for the chart examples in assets/images/charts. Each image uses the same width and height (200×200) so the layout stays even; object-fit: contain keeps aspect ratios readable.

Area

Default
Default 		Witout axes
Witout axes 		With Gradient Bg
With Gradient Bg

Bar

Horizontal bar chart
horizontal-bar 		Labeled bar chart
labeled-bar 		Mixed bar chart
mixed-bar

Bubble

Bubble chart default
default 		Multi bubble chart
multi-bubble 		Bubble chart with pin
pin-bublbe

Candlestick

Candlestick default
default 		Candlestick with moving average
with-ma 		Candlestick with volume
with-volume

Column

Active column chart
active-column 		Multi-series column chart
multi-series 		Standard column chart
standard

Geo

Geo chart colors
colors 		Geo chart default
default 		US map geo chart
us-map

Gauge

Digital gauge
digital 		Radial gauge
radial 		Simple gauge
simple

Line

Multi-line chart
multi-line 		Standard line chart
standard-line 		Trend line chart
trend-line

Pie

Concentric pie chart
concentric 		Donut chart
donut 		Pie chart
pie

Radar

Radar chart default
default 		Multiple radar chart
multiple 		Radar chart with symbol
with-symbol

Radial

Radial chart custom colors
custom-colors 		Radial chart default
default 		Radial chart with background
with-bg

Scatter

Scatter chart default
default 		Multi scatter chart
multi 		Scatter chart with symbol
with-symbol

Building the library (maintainers)

Compile components and prepare the npm package:

npm run build:lib      # TypeScript compile → dist/npm-packages/charts
npm run prepare:npm    # Write package.json, copy README, .npmignore
cd dist/npm-packages/charts && npm publish

Development

This repo is an Expo app. To run the app and Storybook:

npm install
npx expo start # for mobile preview
npm run storybook # to checout the component stories

Maintainers

This package is maintained by WaveMaker. The source repository is wavemaker/wm-react-native-echarts. Use GitHub Issues for bug reports and feature requests.

Contributors

sboyina
sboyina

License

MIT