https://github.com/wavemaker/wm-react-native-echarts

A repository of widgets targeting React Native runtime.
https://github.com/wavemaker/wm-react-native-echarts

Last synced: about 1 month ago
JSON representation

A repository of widgets targeting React Native runtime.

• Host: GitHub
• URL: https://github.com/wavemaker/wm-react-native-echarts
• Owner: wavemaker
• License: mit
• Created: 2026-03-20T10:04:33.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2026-04-13T07:00:50.000Z (about 2 months ago)
• Last Synced: 2026-04-13T09:09:51.488Z (about 2 months ago)
• Size: 2.66 MB
• Stars: 0
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# @wavemaker/react-native-echarts

[![npm package](https://img.shields.io/npm/v/%40wavemaker%2Freact-native-echarts)](https://www.npmjs.com/package/@wavemaker/react-native-echarts)

[![MIT License](https://img.shields.io/github/license/wavemaker/wm-react-native-echarts)](https://github.com/wavemaker/wm-react-native-echarts/blob/main/LICENSE)

[![npm downloads](https://img.shields.io/npm/dm/%40wavemaker%2Freact-native-echarts)](https://www.npmjs.com/package/@wavemaker/react-native-echarts)

[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)](https://github.com/wavemaker/wm-react-native-echarts)

[![Storybook](https://img.shields.io/badge/Storybook-FF4785?logo=storybook&logoColor=white)](https://wavemaker.github.io/wm-react-native-echarts)

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:

```bash

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):

```bash

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

        

      

      

        

          
Witout axes

        

      

      

        

          
With Gradient Bg

        

      

    

  

### Bar

  

    

      

        

          
horizontal-bar

        

      

      

        

          
labeled-bar

        

      

      

        

          
mixed-bar

        

      

    

  

### Bubble

  

    

      

        

          
default

        

      

      

        

          
multi-bubble

        

      

      

        

          
pin-bublbe

        

      

    

  

### Candlestick

  

    

      

        

          
default

        

      

      

        

          
with-ma

        

      

      

        

          
with-volume

        

      

    

  

### Column

  

    

      

        

          
active-column

        

      

      

        

          
multi-series

        

      

      

        

          
standard

        

      

    

  

### Geo

  

    

      

        

          
colors

        

      

      

        

          
default

        

      

      

        

          
us-map

        

      

    

  

### Gauge

  

    

      

        

          
digital

        

      

      

        

          
radial

        

      

      

        

          
simple

        

      

    

  

### Line

  

    

      

        

          
multi-line

        

      

      

        

          
standard-line

        

      

      

        

          
trend-line

        

      

    

  

### Pie

  

    

      

        

          
concentric

        

      

      

        

          
donut

        

      

      

        

          
pie

        

      

    

  

### Radar

  

    

      

        

          
default

        

      

      

        

          
multiple

        

      

      

        

          
with-symbol

        

      

    

  

### Radial

  

    

      

        

          
custom-colors

        

      

      

        

          
default

        

      

      

        

          
with-bg

        

      

    

  

### Scatter

  

    

      

        

          
default

        

      

      

        

          
multi

        

      

      

        

          
with-symbol

        

      

    

  

---

## Building the library (maintainers)

Compile components and prepare the npm package:

```bash

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:

```bash

npm install

npx expo start # for mobile preview

npm run storybook # to checout the component stories 

```

---

## Maintainers

This package is maintained by [WaveMaker](https://www.wavemaker.com/). The source repository is [wavemaker/wm-react-native-echarts](https://github.com/wavemaker/wm-react-native-echarts). Use [GitHub Issues](https://github.com/wavemaker/wm-react-native-echarts/issues) for bug reports and feature requests.

### Contributors

  

    

      

        
sboyina

      

    

  

---

## License

MIT