Scribd
Upload
4 views

syncfusion_flutter_charts

The document provides an overview of the syncfusion_flutter_charts package for Flutter, detailing its installation, key features, and supported chart types. It includes examples of basic usage, interactivity, real-time data updates, and integration with JSON API data. Syncfusion Charts is recommended for complex and interactive charting needs across mobile, web, and desktop platforms.

Uploaded by

ismailovich1904
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

syncfusion_flutter_charts

The document provides an overview of the syncfusion_flutter_charts package for Flutter, detailing its installation, key features, and supported chart types. It includes examples of basic usage, interactivity, real-time data updates, and integration with JSON API data. Syncfusion Charts is recommended for complex and interactive charting needs across mobile, web, and desktop platforms.

Uploaded by

ismailovich1904
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼

▲▼▲▼▲▼
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.

You might also like