React Native version of Apache Echarts, based on react-native-svg. This awesome library offers significantly improved performance compared to WebView-based solutions.

Checkout the full documentation here or https://bit-sudo.com/open-source/react-native-echarts-kit.

About

• 🔥 The same usage as Apache ECharts
• 🎨 Rich charts, covering almost all usage scenarios
• ✨ Optional rendering library: SVG
• 📱 Support gestures such as tapping, dragging and zooming

Installation

yarn add react-native-echarts-kit echarts react-native-gesture-handler zrender

Install react-native-svg according to your needs.

The latest versions of echarts, react-native-svg are recommended

Usage

Example

import * as React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { ChartContainer, ChartApp } from 'react-native-echarts-kit';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { EChartsOption } from 'echarts';

// register extensions
ChartApp.setup([
  // ...
  BarChart,
]);

const option: EChartsOption = {
  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',
    },
  ],
};
// Component usage
export default function App() {
  
  const refChart = React.useRef<echarts.ECharts>(null);
  return (
    <View style={styles.container}>
      <ChartContainer
        ref={refChart}
        containerStyle={styles.viewChart}
        option={option}
      />
      <Button
        title="123"
        onPress={() =>
            refChart.current?.setOption({
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              },
              yAxis: {
                type: 'value',
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}',
              },
              series: [
                {
                  data: [
                    Math.random() * 1000,
                    Math.random() * 1000,
                    Math.random() * 1000,
                    Math.random() * 1000,
                    Math.random() * 1000,
                    Math.random() * 1000,
                    Math.random() * 1000,
                  ],
                  type: 'bar',
                },
              ],
            })
        }
      >
        Tesst
      </Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  viewChart: { height: 250, width: '100%' },
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT