Flutter Echarts Widget

Flutter Echarts Widget



A Flutter widget to use Echarts in a reactive way.

Flutter Bar Chart
Flutter Boxplot Chart
Flutter EffectScatter Chart
Flutter Funnel Chart
Flutter Gague Chart
Flutter Geo Chart
Flutter Graph Chart
Flutter Heatmap Chart
Flutter Kline Chart
Flutter Line Chart
Flutter Liquid Chart
Flutter Map Chart
Flutter Parallel Chart
Flutter Pie Chart
Flutter Radar Chart
Flutter Scatter Chart
Flutter WordCloud Chart
Flutter Bar3D Chart
Flutter Line3D Chart
Flutter Sankey Chart
Flutter Scatter3D Chart
Flutter Surface3D Chart
Flutter ThemeRiver Chart
Flutter Overlap Chart


Reactive Updating

The most exciting feature of Flutter widgets and React components is that the view could update reactively to the change of data. Thanks to Echarts’ data driving architecture, flutter_echarts implemented a reactive way to connect chart with data. The chart will automatically re-render when the data in the option property changes.

Two Way Communication

The onMessage and extraScript properties provide a way to set event communication both from flutter to JavaScript or in controversy.

Configurable Extensions

Echarts has a lot of extensions . the extensions property allows you to inject the extension scripts as raw strings. In this way, you can copy these scripts to your source code, without concerning about the confusing assets dirs.


Add this to your package’s pubspec.yaml file:

  flutter_echarts: #latest version

Now in your Dart code, you can use:

import 'package:flutter_echarts/flutter_echarts.dart';  

Details see pub.dev .


The flutter_echarts itself is very simple to use, just like a common statelessWidget:

Details about the option is in the Echarts docs or Echarts examples

  child: Echarts(
  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'
  width: 300,
  height: 250,

For an ios app, you need to add this entry to your Info.plist’ <dic> tag:


A full example is here: flutter_echarts_example .

Widget Properties



( required )

The JavaScript Echarts Option for the chart as a string. The echarts is mainly configured by this property. You could use jsonEncode() function in dart:convert to convert data in Dart object form:

source: ${jsonEncode(_data1)},

Because JavaScript don’t have ''' , you can use this operator to reduce some escape operators for quotas:

  option: '''

    // option string




The JavaScript which will execute after the Echarts.init() and before any chart.setOption() . The widget has build a javascriptChennel named Messager, so you could use this identifier to send message from JavaScript to Flutter:

extraScript: '''
  chart.on('click', (params) => {
    if(params.componentType === 'series') {


void Function(String)

Function to handle the message sent by Messager.postMessage() in extraScript .



List of strings that coyied from Echarts extensions, such as themes, components, WebGL, languages, etc. You can download them here . Insert them as raw strings:

const liquidPlugin = r'''

  // copy from liquid.min.js




You can download built-in themes here or build own custom themes with this tool . Copy the theme script into the extensions param and register the theme name with this param.



( default: false )

Whether the chart captures all gestures. Setting it ture is usefull when handling 3D rotation and data zoom bars. Note that will prevent containers like ListViews to act to gestures on the charts.


Reactive Echarts Flutter Widget

A performance optimization of Flutter WebView

If you have any suggestions or demands, please give an issue .

The gallery GIF is from chenjiandongx

Source Code

Please Visit Flutter Echarts Widget Source Code at GitHub