Syncfusion Flutter Charts
Syncfusion Flutter Charts is a data visualization library written natively in Dart for creating beautiful and high-performance charts, which are used to craft high-quality mobile app user interfaces using Flutter.
Overview
Create various types of cartesian or circular charts with seamless interaction, responsiveness, and smooth animation. It has a rich set of features, and it is completely customizable and extendable.
Table of contents
Chart features
-
Chart types - Provide functionality for plotting 12 chart types, namely line, spline, column, bar, area, bubble, scatter, step line, fast line, pie, doughnut, and radial bar. Each chart type is easily configured and customized with built-in features for creating stunning visual effects.
-
Axis types - Plot various types of data in a graph with the help of numeric, category, and date-time axis types. The built-in axis features allow to customize an axis elements further to make the axis more readable.
-
Legends - Display additional information about the chart series. The chart legend can also be used to collapse the series. The legends can be wrapped or scrolled if an item exceeds the available bounds.
-
User interaction - The end-user experience is greatly enhanced by including the user interaction features such as zooming and panning, crosshair, trackball, events, selection, and tooltip in chart.
-
Dynamic update - Updates the chart dynamically with live data that changes over seconds or minutes like stock prices, temperature, speed, etc.
Installation
Install the latest version from pub.
Getting started
Import the following package.
import 'package:syncfusion_flutter_charts/charts.dart';
Add chart to the widget tree
Add the chart widget as a child of any widget. Here, the chart widget is added as a child of container widget.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
)
)
)
);
}
Bind data source
Based on data, initialize the appropriate axis type and series type. In the series, map the data source and the fields for x and y data points. To render a line chart with category axis, initialize appropriate properties.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
// Initialize category axis
primaryXAxis: CategoryAxis(),
series: <LineSeries<SalesData, String>>[
LineSeries<SalesData, String>(
// Bind data source
dataSource: <SalesData>[
SalesData('Jan', 35),
SalesData('Feb', 28),
SalesData('Mar', 34),
SalesData('Apr', 32),
SalesData('May', 40)
],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales
)
]
)
)
)
);
}
class SalesData {
SalesData(this.year, this.sales);
final String year;
final double sales;
}
Note
- Use
SfCartesianChart
widget to render line, spline, area, column, bar, bubble, scatter, step line, and fast line charts. - Use
SfCircularChart
widget to render pie, doughnut, and radial bar charts.
Add chart elements
Add the chart elements such as title, legend, data label, and tooltip to display additional information about the data plotted in the chart.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
// Chart title
title: ChartTitle(text: 'Half yearly sales analysis'),
// Enable legend
legend: Legend(isVisible: true),
// Enable tooltip
tooltipBehavior: TooltipBehavior(enable: true),
series: <LineSeries<SalesData, String>>[
LineSeries<SalesData, String>(
dataSource: <SalesData>[
SalesData('Jan', 35),
SalesData('Feb', 28),
SalesData('Mar', 34),
SalesData('Apr', 32),
SalesData('May', 40)
],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
// Enable data label
dataLabelSettings: DataLabelSettings(isVisible: true)
)
]
)
)
)
);
}
The following screenshot illustrates the result of the above code sample.
Useful links
Take a look at the following to learn more about Syncfusion Flutter charts:
- Chart examples in GitHub repository.
- Syncfusion Flutter UI Widgets app in Google Play Store.
Libraries
Dart
- dart:ui
- Built-in types and core primitives for a Flutter application. [...]
- dart:async
- Support for asynchronous programming, with classes such as Future and Stream. [...]
- dart:collection
- Classes and utilities that supplement the collection support in dart:core. [...]
- dart:convert
- Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
- dart:core
- Built-in types, collections, and other core functionality for every Dart program. [...]
- dart:developer
- Interact with developer tools such as the debugger and inspector. [...]
- dart:math
- Mathematical constants and functions, plus a random number generator. [...]
- dart:typed_data
- Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]
- dart:io
- File, socket, HTTP, and other I/O support for non-web applications. [...]
- dart:isolate
- Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]