fl_echarts 0.3.0

ECharts for Flutter — Android, iOS, macOS, Web & Windows. No JS knowledge needed. Powered by an embedded WebView.

fl_echarts

A Flutter package that brings the full power of Apache ECharts to your Flutter app via an embedded WebView — no JavaScript knowledge required.

Supported platforms: Android · iOS · macOS · Web · Windows

Linux: not yet supported (no viable webview backend available).

---

Features

• Render any ECharts chart (line, bar, pie, scatter, candlestick, radar, map, …)
• Dark mode support
• Dynamic chart updates without rebuilding the widget
• Manual showLoading / hideLoading control
• Custom JavaScript execution
• Resize API
• EChartsController for full programmatic control
• Callbacks: onChartReady, onMessage, onWebViewCreated

---

Getting started

1. Add the dependency

dependencies:
  fl_echarts: ^0.3.0

2. Platform setup

Android — no extra steps.

iOS / macOS — add to ios/Runner/Info.plist (iOS) or macos/Runner/Info.plist (macOS):

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsLocalNetworking</key>
  <true/>
</dict>

Web — no extra steps. Charts render inside an iframe using the browser's native rendering.

Windows — requires the WebView2 Runtime (pre-installed on Windows 10 21H2+ and all Windows 11). For older Windows 10 machines, users must install it from Microsoft. Follow the webview_windows setup guide for any additional project configuration.

---

Usage

Basic chart

import 'package:fl_echarts/fl_echarts.dart';

ECharts(
  height: 300,
  option: {
    'xAxis': {'type': 'category', 'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']},
    'yAxis': {'type': 'value'},
    'series': [
      {'type': 'bar', 'data': [120, 200, 150, 80, 70]},
    ],
  },
)

Using EChartsController

final _controller = EChartsController();

// In your widget
ECharts(
  height: 300,
  controller: _controller,
  option: _myOption,
  onChartReady: () {
    // Chart is rendered and ready
  },
)

// Update the chart data later
await _controller.updateChart(_newOption);

// Show/hide loading overlay
_controller.showLoading(text: 'Fetching data…');
await Future.delayed(const Duration(seconds: 2));
_controller.hideLoading();

// Trigger resize after layout changes
await _controller.resizeChart();

// Run arbitrary JavaScript
await _controller.executeJavaScript('echart.clear();');

// Clean up
_controller.dispose();

Dark mode

ECharts(
  height: 300,
  darkMode: true,
  option: _myOption,
)

Full widget parameters

Parameter	Type	Default	Description
option	Map<String, dynamic>	required	ECharts option object
width	double?	fills parent	Widget width
height	double?	400	Widget height
darkMode	bool	false	Enable dark theme
controller	EChartsController?	—	Programmatic control
onChartReady	VoidCallback?	—	Called when chart finishes rendering
onMessage	EChartsMessageCallback?	—	Raw JS→Flutter messages
onWebViewCreated	VoidCallback?	—	Called when WebView is created

---

ECharts documentation

For the full list of chart types and option fields see the
official ECharts documentation.

---

License

MIT. See LICENSE.