Flutter Charts - Beautiful and Interactive Charts and Graphs
- 30+ Charts in a growing collection.
- Smooth real-time charts.
- Intuitive APIs with detailed documentation.
- Rich interactive features to explore charts.
Trusted by the world’s leading companies
new layout
Why Choose Syncfusion Flutter Charts?
The Flutter Charts is a well-crafted charting widget for visualizing data. It contains a rich gallery of 30+ charts and graphs, ranging from line to financial charts, that cater to all charting scenarios.
30+ Charts
This widget includes the most popular and widely used charts like line, column, bar, pie, and doughnut.
Rich feature set
A vast range of features is available to customize the appearance of charts and render the desired outputs.
Fluid animation
Fluid animation represents data with smooth transitions.
Performance
The Flutter Charts widget was designed with a focus on fast-paced performance to let users render huge amounts of data in seconds.
Globalization
Enables Users from different locales to use Charts by formatting dates, currencies, and numbering to suit their preferences.
Responsiveness
Charts in Flutter render adaptively based on device type, like phones and tablets, and device orientation, providing an optimal user experience.
Chart axis
The Flutter Charts with rich UI supports four different types of axes: numerical, categorical, date-time, and logarithmic. The appearance of all chart axis elements can be customized with built-in properties.
Numerical axis
Uses a numeric scale and displays numbers in equal intervals in axis labels.
Date-time axis
Displays date-time values in equal intervals in axis labels. It is typically used as the x-axis.
Date-time category axis
Displays date-time category values in non-linear intervals in axis labels. It is typically used as the x-axis.
{:width=”1080” height=”538” loading=”lazy”}
Logarithmic axis
Uses a logarithmic scale and displays numbers in labels.
Real-time charts
Flutter real-time charts allow you to display live data that changes in seconds or minutes.
Dynamic updates
Flutter Charts updates itself when the data changes or is added at run time with smooth transitions.
Smooth fluid animation
The dynamically updated data point values are rendered with fluid easing animation.
User interactions
The end-user experience is greatly enhanced by interaction features such as zooming, panning, trackball, selection, tooltip, and auto scrolling.
Zooming and panning
Improve the readability of large numbers of data points by zooming and panning. Zooming is performed by pinching, selecting a region, or double-tapping at the required position.
Tooltip
The tooltip displays a pop-up with additional information when the user taps on a data point.
Selection
Interactively select and highlight a data point. This is usually used to navigate to another page that contains information about the selected data point or to update other components in the same page based on the selected data point in the chart.
Trackball
Track data points that are close to the touch contact. Trackball displays pop-up information about the data with more customizable options.
Crosshair
Using a crosshair, inspect or target any data point. The target data point is indicated by a thin horizontal line crossing a vertical line, and information about that point is displayed in an interactive tooltip.
Auto scrolling
Auto scrolling ensures that a specified range of data points is always visible in a chart. You can view the remaining data points by scrolling.
Data labels and markers
Data points can easily be annotated with labels to improve the readability of a Flutter chart. Readability can further be enhanced by adding markers or customizable symbols.
Data point markers
Mark the data points with built-in available shapes to improve readability.
Labels and connector lines
Connect a data point and its label with a Bezier curve or a straight line.
Label customization
Charts for Flutter customize data labels using templates.
Legends
Legends provide additional information helpful in identifying individual data points or a series in a Flutter chart.
Positioning
Position the legend anywhere in the chart area to best suit the page.
Icons
Customize a legend icon with built-in shapes such as rectangles, circles, diamonds, pentagons, triangles, and crosses to improve readability.
Templating
Template the legend items to show more information about a series or data point in a legend.
Legend layout
Wrap or scroll legend items if they overflow the existing space.
Other feature highlights
From a vast collection of features available in Flutter Charts, a few are described here.
Vertical charts
Rotate all the series in a Flutter chart to plot data vertically and view it from a different perspective.
Annotations
Display metadata about a Flutter chart or series at a specific point of interest in the plotting area using annotations.
Plot bands
Highlight specific regions in a plot using plot bands. Add text to describe a highlighted area.
Technical indicators
Built-in support for RSI, momentum, Bollinger bands, accumulation distribution, EMA, SMA, stochastic, ATR, MACD, TMA, ROC, and WMA indicators.
Trendlines
Built-in support for linear, exponential, logarithmic, polynomial, and moving average trendlines for technical analysis in Flutter charts.
Gradient colors
Improve the readability and appearance of charts by applying gradient colors to visualized data in different colors.
Empty points
Elegantly handle the empty point values in Flutter charts.
Flutter Charts Code Example
Easily get started with the Flutter Charts using a few simple lines of DART code example as demonstrated below. Also explore our Flutter Charts Example that shows you how to render and configure the Charts in Flutter.
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
void main() {
return runApp(_ChartApp());
}
class _ChartApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: _MyHomePage(),
);
}
}
class _MyHomePage extends StatefulWidget {
// ignore: prefer_const_constructors_in_immutables
_MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<_MyHomePage> {
List<_SalesData> data = [
_SalesData('Jan', 35),
_SalesData('Feb', 28),
_SalesData('Mar', 34),
_SalesData('Apr', 32),
_SalesData('May', 40)
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter chart'),
),
body: Column(children: [
//Initialize the chart widget
SfCartesianChart(
primaryXAxis: CategoryAxis(),
// Chart title
title: ChartTitle(text: 'Half yearly sales analysis'),
// Enable legend
legend: Legend(isVisible: true),
series: <ChartSeries<_SalesData, String>>[
LineSeries<_SalesData, String>(
dataSource: data,
xValueMapper: (_SalesData sales, _) => sales.year,
yValueMapper: (_SalesData sales, _) => sales.sales,
name: 'Sales',
// Enable data label
dataLabelSettings: DataLabelSettings(isVisible: true))
]),
]));
}
}
class _SalesData {
_SalesData(this.year, this.sales);
final String year;
final double sales;
}Not sure how to create your first Flutter Charts? Our tutorial videos and documentation can help.
I’d love to watch now I’d love to read nowFrequently Asked Questions
Why should you choose Syncfusion Flutter Charts?
Support for 30+ chart types with elegant animation.
A vast set of great, interactive features enhance the end-user experience.
- Easy creation and customization of charts in Android, iOS, web, Windows, macOS, and Linux platforms.
- One of the best Flutter Charts in the market that offers feature-rich UI to interact with the software.
- Large sets of data can be visualized with on-demand loading, flexible data binding, and high performance.
- Every element in the charts is completely customizable.
- Simple configuration and intuitive APIs.
- Adaptive and responsive UI.
- Support for all modern devices and browsers.
Extensive demos in all supported platforms (Android, Web, Windows, macOS and Linux demos).
Get started with Flutter Charts quickly using the documentation and tutorial videos
Where can I find the Syncfusion Flutter Charts demo?
You can find our Flutter Charts demo here.
Can I download and utilize the Syncfusion Flutter Charts for free?
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
How do I get started with Syncfusion Flutter Charts?
A good place to start would be our comprehensive getting started documentation.
All our Flutter UI & DataViz Widgets
Our Customers Love Us
See Real Success Stories
Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.
Explore Case StudiesIndustry
Software development
75%Cost reduction
50%Faster development
Industry
Utilities (oil and gas)
450+hours saved
Streamlined processes and hours of development effort saved.
Advanced, flexible features
Empowered users through robust and versatile functionality.
Industry
Software and technology
1000+of hours saved
Accelerated development with enterprise-ready UI components.
Efficient file management
Streamlined workflows with document libraries without building them from scratch.
Industry
Software and technology
2 Yearsof delay avoided
Two years of delays prevented with proactive planning.
On-time delivery
Projects delivered on schedule using trusted controls.
Industry
IT services and IT consulting
Improved performance
Large datasets handled with easy customization and quick debugging.
Highly customizable
Plug-and-play controls with quick template integration.
Industry
Professional services
Instant access
Quick availability of features and resources.
Reduced dependencies
Fewer dependencies for faster development.
Rated by users across the globe
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
