Using Apache ECharts in React Native based on react-native-skia

[zhiqingchen]

We have developed an open source library based on react-native-skia and react-native-svg, called wrn-echarts, for drawing charts in react native using Apache ECharts.

Apache ECharts is a powerful, interactive charting and data visualization library for browser.

Using wrn-echarts, you can draw amazing charts in react native, here are some examples.

For more information, you can read the article on medium.

Anyone interested can try it out. If you have any suggestions or questions, please feel free to raise an issue on github.

[wcandillon]

Congratulations! How do the two renderers compare with other? What was the main motivation to offer a Skia renderer?
I would be curious to hear what are the future plans with this library.

[zhiqingchen]

Thanks for your reply.

There are many kinds of charts in echarts, and in most scenarios, both renderers perform well.
However, in some scenarios, there are some very strange bugs and sometimes crashes, which have not been solved yet, and the fluency of both renderers differs in different situations, so we provide two renderers to give users one more choice.

	normal	abnormal
Android	https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/ea3c2c7df2b4c4dbbe8bde97c4696d35.mp4	https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/8e1cdb88bbccf6349023a3863fec6561.mp4
iOS	https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/3907aa6f03e4063294711d0de01ccd12.mp4	https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/b63eb74f16c859cfa737e0aaaca2eb1a.mp4

Next steps.

Our goal is to provide a better charting library for react native, so we will continue to optimize this library to make it better.

1. using declarative UI to present charts with large amount of data is not a good choice, so we will try to optimize this.
2. web compatibility.
3. add unsupported effects, such as filter for svg.
4. fix known issues.

[norelayx]

I tried to use it in my project and it's great!

[zhiqingchen]

React Native ECharts 1.1 Released

We are excited to release a stable version of React Native ECharts 1.1. In the new version, we have added support for the react-native-gesture-handler gesture solution, among other enhancements. Read on to learn more!

Rich Chart Types Supported

various dynamic charts

Large data volume charting support

Smooth gesture interaction

Read more at https://medium.com/@chenzhiqing/boosting-data-insights-the-new-react-native-echarts-1-1-update-c125ee8d40e6

[wcandillon]

Look awesome thanks for sharing. Hopefully soon we will have support for system fonts, it sounds like it will help your use-case. Congrats on the amazing work!

[zhiqingchen]

Look awesome thanks for sharing. Hopefully soon we will have support for system fonts, it sounds like it will help your use-case. Congrats on the amazing work!

Thanks. Support for system fonts, will be helpful. Can't wait to try it.