react-native-echarts-wrapper v2.0.0

Apache ECharts (incubating) wrapper build for React Native/Expo.

Screenshots • How To Use • Authors

A React Native wrapper for the popular echarts charting framework. With this library you can create complex, interactive charts with great performance on mobile devices.

The fact that the charting framework purely runs in a webview makes it very stable to upcomming React-Native versions. On the other hand it is not easy to make a two way data communication between the chart (running in the webview Javascript thread) and the React-Native Javascript thread. With this library you can even build the more complex chart options of echarts. You can inject custom javascript code within the webview which allows you to access the chart api (detect taps, selections etc...)

Screenshots

How To Use

$ yarn add react-native-echarts-wrapper

Make sure you installed react-native-webview

Supported Versions

Properties

Methods / Callbacks

Webview functions

These functions can be called from code injected with additionalCode or within the echarts option.

Webview variables

Simple example

import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import { ECharts } from "react-native-echarts-wrapper";

export default class App extends Component {
  option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line"
      }
    ]
  };

  render() {
    return (
      <View style={styles.chartContainer}>
        <ECharts
          option={this.option}
          backgroundColor="rgba(93, 169, 81, 0.3)"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  chartContainer: {
    flex: 1
  }
});

More complex example

import React, { Component } from "react";
import { StyleSheet, SafeAreaView, Button } from "react-native";
import { ECharts } from "react-native-echarts-wrapper";

export default class App extends Component {
  option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line"
      }
    ]
  };

  additionalCode = `
        chart.on('click', function(param) {
            var obj = {
            type: 'event_clicked',
            data: param.data
            };

            sendData(JSON.stringify(obj));
        });
    `;

  onData = param => {
    const obj = JSON.parse(param);

    if (obj.type === "event_clicked") {
      alert(`you tapped the chart series: ${obj.data}`);
    }
  };

  onRef = ref => {
    if (ref) {
      this.chart = ref;
    }
  };

  onButtonClearPressed = () => {
    this.chart.clear();
  };

  render() {
    return (
      <SafeAreaView style={styles.chartContainer}>
        <Button title="Clear" onPress={this.onButtonClearPressed} />

        <ECharts
          ref={this.onRef}
          option={this.option}
          additionalCode={this.additionalCode}
          onData={this.onData}
          onLoadEnd={() => {
            this.chart.setBackgroundColor("rgba(93, 169, 81, 0.1)");
          }}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  chartContainer: {
    flex: 1,
    backgroundColor: "#F5FCFF"
  }
});

Dynamic loading example

import React, { Component } from "react";
import { StyleSheet, SafeAreaView, Button } from "react-native";
import { ECharts } from "react-native-echarts-wrapper";

export default class App extends Component {
  onRef = ref => {
    if (ref) {
      this.chart = ref;
    }
  };

  onData = param => {};

  initChart = () => {
    function randomData() {
      now = new Date(+now + oneDay);
      value = value + Math.random() * 21 - 10;
      return {
        name: now.toString(),
        value: [
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
          Math.round(value)
        ]
      };
    }

    var data = [];
    var now = +new Date(1997, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var value = Math.random() * 1000;
    for (var i = 0; i < 1000; i++) {
      data.push(randomData());
    }

    option = {
      title: {
        text: "Dynamic Chart"
      },
      tooltip: {
        trigger: "axis",
        formatter: function(params) {
          params = params[0];
          var date = new Date(params.name);
          return (
            date.getDate() +
            "/" +
            (date.getMonth() + 1) +
            "/" +
            date.getFullYear() +
            " : " +
            params.value[1]
          );
        },
        axisPointer: {
          animation: false
        }
      },
      xAxis: {
        type: "time",
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: "value",
        boundaryGap: [0, "100%"],
        splitLine: {
          show: false
        }
      },
      series: [
        {
          type: "line",
          showSymbol: false,
          hoverAnimation: false,
          data: data
        }
      ]
    };

    this.chart.setOption(option);

    //no query parameter: whole option object
    this.chart.getOption(option => {
      console.log(option);
    });

    //with query parameter
    this.chart.getOption(
      option => {
        console.log(option);
      },
      ["dataZoom", "series"]
    );

    const instance = this.chart;

    setInterval(function() {
      for (var i = 0; i < 5; i++) {
        data.shift();
        data.push(randomData());
      }

      instance.setOption({
        series: [
          {
            data: data
          }
        ]
      });
    }, 100);
  };

  render() {
    return (
      <SafeAreaView style={styles.chartContainer}>
        <Button title="Start" onPress={this.initChart} />

        <ECharts
          option={{}}
          ref={this.onRef}
          additionalCode={this.additionalCode}
          onData={this.onData}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  chartContainer: {
    flex: 1,
    backgroundColor: "#F5FCFF"
  }
});

[2.0.0] - Thursday, 03.October 2019

Breaking Changes

• removed property canvas (canvas renderer default)
• removed legacyMode (react-native-webview required)
• removed baseUrl

Added

• customTemplatePath prop allows to set the path to a custom html-file (template: node_modules/react-native-echarts-wrapper/dist/index.html)

Fixed

• Tried to register two views with the same name RNCWebView? (#35)
• Got rejected from Apple review (#31)
• usage on expo as there is no android_asset folder (#19)
• cannot use '\n' in custom format text (#14)

[1.4.7] - Thursday, 12.September 2019

Fixed

• Variables and functions from injectedJavaScript not available on Android (see react-native issue)

[1.4.5] - Saturday, 17.August 2019

Added

• Loading state/Background Color (#17)

[1.4.4] - Thursday, 08.August 2019

Fixed

• postMessage double-encoded iOS RN 0.59.x (see react-native issue)

[1.4.3] - Tuesday, 06.August 2019

Fixed

• Broken on React Native >= 0.60.0 (Invariant Violation: Element type is invalid) (#27)

[1.4.2] - Wednesday, 31.July 2019

Fixed

• fix arrow function not working on old version Android webview (#25)

[1.4.1] - Tuesday, 25.June 2019

Fixed

• Dynamic loading issue on iOS (#16)

[1.4.0] - Monday, 20.May 2019

Fixed

• Doesn't work on iOS in Expo (#13)

Added

• canvas & legacyMode

[1.3.0] - Thursday, 18.Apr 2019

Added

• tests, coverage, build report

Fixed

• Blank page on Android (#10)

[1.2.2] - Monday, 18.Feb 2019

Fixed

• crash when not passing an option

[1.2.1] - Wednesday, 16.Jan 2019

Added

• getOption (#4)

[1.1.1] - Tuesday, 27.Nov 2018

Fixed

• Documentation missing (#3)

[1.1.0] - Saturday, 17.Nov 2018

Added

• baseUrl prop allows to access local content within the Webview on iOS and Android
• additionalCode prop allows to create more complex chart configurations (e.G. chart.on('click')

[1.0.4] - Monday, 5.Nov 2018

Fixed

• Functions in options do not work when setting via 'setOptions'

Authors

Thomas Leiter

Contributors

Stefan Papst

See also the list of contributors who participated in this project.