JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 65
  • Score
    100M100P100Q95768F
  • License MIT

React Native chart components built on using e-charts library.

Package Exports

  • @wavemaker/react-native-echarts
  • @wavemaker/react-native-echarts/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@wavemaker/react-native-echarts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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@6.0.0 zrender@6.0.0 react-native-svg

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

Note: There is an issue with echarts library. Due to which compilation fails with an error. Here is the link to the issue. https://github.com/apache/echarts/pull/20485

Till the issue is fixed, follow the workaround mentioned in the below link. https://github.com/wuba/react-native-echarts/issues/239#issuecomment-2899678660

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

Heatmap

Heatmap default
default 		Heatmap with cell labels
with-cell-labels 		Heatmap custom colors
custom-colors

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

Work from the repository root (the directory that contains package.json, components/, and stories/).

Browser (Storybook)

Storybook runs the chart stories in the browser with Vite. After install, it serves at http://localhost:6006.

npm install
npm run storybook

Mobile (Expo sample app)

The expo-app/ project is a small Expo Router app that consumes the library via yalc. Install yalc globally first so those commands are on your PATH.

npm install -g yalc
cd /path/to/repo # repository root directory
npm install
npm run generate:package
cd expo-app
npm install
npx expo start

Whenever you change library source under components/ or related entry points, run npm run generate:package again from the repo root so the yalc-linked package is rebuilt and republished. When changes are not reflecting in the app even after reload, use npx expo start -c.

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