new layout
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.
This widget includes the most popular and widely used charts like line, column, bar, pie, and doughnut.
A vast range of features is available to customize the appearance of charts and render the desired outputs.
Fluid animation represents data with smooth transitions.
The Flutter Charts widget was designed with a focus on fast-paced performance to let users render huge amounts of data in seconds.
Enables Users from different locales to use Charts by formatting dates, currencies, and numbering to suit their preferences.
Charts in Flutter render adaptively based on device type, like phones and tablets, and device orientation, providing an optimal user experience.
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.
Uses a numeric scale and displays numbers in equal intervals in axis labels.
Displays date-time values in equal intervals in axis labels. It is typically used as the x-axis.
Displays date-time category values in non-linear intervals in axis labels. It is typically used as the x-axis.
Uses a logarithmic scale and displays numbers in labels.
Flutter real-time charts allow you to display live data that changes in seconds or minutes.
Flutter Charts updates itself when the data changes or is added at run time with smooth transitions.
The dynamically updated data point values are rendered with fluid easing animation.
The end-user experience is greatly enhanced by interaction features such as zooming, panning, trackball, selection, tooltip, and auto scrolling.
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.
The tooltip displays a pop-up with additional information when the user taps on a data point.
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.
Track data points that are close to the touch contact. Trackball displays pop-up information about the data with more customizable options.
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 ensures that a specified range of data points is always visible in a chart. You can view the remaining data points by scrolling.
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.
Mark the data points with built-in available shapes to improve readability.
Connect a data point and its label with a Bezier curve or a straight line.
Charts for Flutter customize data labels using templates.
Legends provide additional information helpful in identifying individual data points or a series in a Flutter chart.
Position the legend anywhere in the chart area to best suit the page.
Customize a legend icon with built-in shapes such as rectangles, circles, diamonds, pentagons, triangles, and crosses to improve readability.
Template the legend items to show more information about a series or data point in a legend.
Wrap or scroll legend items if they overflow the existing space.
From a vast collection of features available in Flutter Charts, a few are described here.
Rotate all the series in a Flutter chart to plot data vertically and view it from a different perspective.
Display metadata about a Flutter chart or series at a specific point of interest in the plotting area using annotations.
Highlight specific regions in a plot using plot bands. Add text to describe a highlighted area.
Built-in support for RSI, momentum, Bollinger bands, accumulation distribution, EMA, SMA, stochastic, ATR, MACD, TMA, ROC, and WMA indicators.
Built-in support for linear, exponential, logarithmic, polynomial, and moving average trendlines for technical analysis in Flutter charts.
Improve the readability and appearance of charts by applying gradient colors to visualized data in different colors.
Elegantly handle the empty point values in Flutter charts.
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;
- }
You can find our Flutter Charts demo here.
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.
A good place to start would be our comprehensive getting started documentation.
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.
