▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
▲▼▲▼▲▼
tags : #coding #flutter
references : UI and Animation Packages
▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
▲▼▲▼▲▼###
*Overview
syncfusion_flutter_charts is a package by Syncfusion that provides a wide range of chart
types and customization options for Flutter applications. It is widely used for data visualization
in mobile, web, and desktop apps. The package is part of the broader Syncfusion Flutter suite,
which includes various UI components.
1. Installation
To use Syncfusion charts in Flutter, add the dependency to pubspec.yaml :
dependencies:
syncfusion_flutter_charts: ^xx.x.xx # Check the latest version on pub.dev
Then, run:
flutter pub get
Import it into your Dart file:
import 'package:syncfusion_flutter_charts/charts.dart';
2. Key Features
✅ Supports a Wide Range of Charts
✅ Highly Customizable
✅ Interactive Features (Zooming, Panning, Tooltips, Trackball, etc.)
✅ Real-time Updates & Live Charts
✅ Data Binding with Various Data Sources
✅ Annotations & Indicators for Advanced Analytics
✅ Material & Cupertino Themes Support
✅ Works on Flutter Mobile, Web, and Desktop
3. Supported Chart Types
Syncfusion Charts supports more than 30 chart types, including:
Basic Charts
Line Chart
Column Chart
Bar Chart
Area Chart
Scatter Chart
Advanced Charts
Pie Chart
Doughnut Chart
Radial Bar Chart
Pyramid Chart
Funnel Chart
Financial Charts
Candle Chart
OHLC Chart
Combination Charts
Stacked Line/Column/Bar
100% Stacked Charts
Range Area & Range Column
Other Special Charts
Bubble Chart
Waterfall Chart
Heatmap Chart
4. Basic Example (Line Chart)
Here’s a simple example of a line chart using Syncfusion:
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
void main() {
runApp(MaterialApp(home: ChartExample()));
}
class ChartExample extends StatelessWidget {
final List<ChartData> chartData = [
ChartData(2010, 35),
ChartData(2011, 28),
ChartData(2012, 34),
ChartData(2013, 32),
ChartData(2014, 40),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Syncfusion Line Chart")),
body: SfCartesianChart(
primaryXAxis: CategoryAxis(),
title: ChartTitle(text: 'Sales Growth Over Years'),
legend: Legend(isVisible: true),
tooltipBehavior: TooltipBehavior(enable: true),
series: <ChartSeries>[
LineSeries<ChartData, int>(
name: "Sales",
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.year,
yValueMapper: (ChartData data, _) => data.sales,
dataLabelSettings: DataLabelSettings(isVisible: true),
),
],
),
);
}
}
class ChartData {
final int year;
final double sales;
ChartData(this.year, this.sales);
}
🔹 What’s Happening Here?
SfCartesianChart : The main widget for Cartesian charts.
primaryXAxis: CategoryAxis() : Defines the X-axis.
LineSeries : Represents the line chart with data binding.
TooltipBehavior(enable: true) : Enables interactive tooltips.
DataLabelSettings(isVisible: true) : Displays labels on data points.
5. Interactivity & Customization
🔍 Zooming & Panning
Enable zooming and panning using:
zoomPanBehavior: ZoomPanBehavior(
enablePinching: true,
enablePanning: true,
enableDoubleTapZooming: true,
),
📌 Trackball (Hover Indicator)
trackballBehavior: TrackballBehavior(
enable: true,
activationMode: ActivationMode.singleTap,
),
🛠️Customizing Axis
primaryXAxis: NumericAxis(
title: AxisTitle(text: "Years"),
edgeLabelPlacement: EdgeLabelPlacement.shift,
interval: 1, // Step size
),
🎨 Custom Styling
You can customize colors, line width, and markers:
LineSeries<ChartData, int>(
color: Colors.blue, // Custom color
width: 3, // Line thickness
markerSettings: MarkerSettings(
isVisible: true,
shape: DataMarkerType.circle, // Adds markers
),
),
6. Real-Time Data Update (Live Chart)
To dynamically update charts, use setState() :
void updateChart() {
setState(() {
chartData.add(ChartData(2025, 50)); // Add new data point
});
}
Use a Timer for automatic updates:
Timer.periodic(Duration(seconds: 1), (timer) {
updateChart();
});
7. Financial Charts (Candlestick & OHLC)
For stock market apps, you can use:
CandleSeries<ChartData, DateTime>(
dataSource: stockData,
xValueMapper: (ChartData data, _) => data.date,
lowValueMapper: (ChartData data, _) => data.low,
highValueMapper: (ChartData data, _) => data.high,
openValueMapper: (ChartData data, _) => data.open,
closeValueMapper: (ChartData data, _) => data.close,
),
8. Using JSON API Data
Syncfusion charts can easily work with API data:
Future<List<ChartData>> fetchChartData() async {
final response = await http.get(Uri.parse("https://api.example.com/data"));
final List<dynamic> data = jsonDecode(response.body);
return data.map((item) => ChartData(item["year"], item["sales"])).toList();
}
Then use FutureBuilder :
FutureBuilder(
future: fetchChartData(),
builder: (context, snapshot) {
if (!snapshot.hasData) return CircularProgressIndicator();
return SfCartesianChart(
series: <LineSeries<ChartData, int>>[
LineSeries<ChartData, int>(
dataSource: snapshot.data,
xValueMapper: (ChartData data, _) => data.year,
yValueMapper: (ChartData data, _) => data.sales,
)
],
);
},
);
9. When to Use Syncfusion Charts?
✅ Best for complex and interactive charts
✅ When you need real-time updates
✅ If you want cross-platform Flutter support
✅ Ideal for dashboards, finance apps, and business analytics
✅ If you want rich built-in customization without extra effort
10. Alternatives
If you are looking for other charting options:
fl_chart – Great for simple charts, more lightweight.
charts_flutter – Google’s official chart package (less customizable).
mp_chart – Inspired by MPAndroidChart, but has fewer features than Syncfusion.
Why Choose Syncfusion?
More chart types & customization
Built-in interactivity (zoom, pan, tooltips, etc.)
Regular updates & support
Final Thoughts
Syncfusion Flutter Charts is one of the best solutions for integrating beautiful, interactive, and
powerful charts in Flutter apps. It is well-documented, feature-rich, and works seamlessly
across platforms.
