Updated 7 October 2024
Syncfusion Flutter Charts is a comprehensive charting library that integrates seamlessly with Flutter applications. It offers various chart types, from basic line and bar charts to advanced financial charts and interactive features. This library aims to empower developers to create engaging and informative visualizations that enhance the user experience.
There are some types of Charts :
Syncfusion Flutter Charts support various types of charts for different visualization needs:
Syncfusion Flutter Charts offer several axis types to customize data presentation:
Syncfusion Flutter Charts provide various interactive features to enhance user experience:
Legends in Syncfusion Flutter Charts help identify different series and categories:
Syncfusion Flutter Charts support dynamic updates to reflect real-time changes:
Steps of Implementation of Charts in Flutter.
Step 1— First, you will have to add the syncfusion_flutter_charts dependency to our project’s pubspec.yaml file.
By using the below command, add a package in the yaml file
Command :- flutter pub add syncfusion_flutter_charts
or
Add manually in the yaml file.
Then run the “Flutter pub get” command.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
class LineChartExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Line Chart Example'), ), body: Padding( padding: const EdgeInsets.only(top: 28.0, bottom: 150), child: SfCartesianChart( series: [ LineSeries<SalesData, double>( dataSource: <SalesData>[ SalesData(1, 35), SalesData(2, 28), SalesData(3, 34), SalesData(4, 32), SalesData(5, 34), SalesData(6, 42), SalesData(7, 34), SalesData(8, 32), ], xValueMapper: (SalesData sales, _) => sales.year, yValueMapper: (SalesData sales, _) => sales.sales, ), ], ), ), ); } } class SalesData { SalesData(this.year, this.sales); final double year; final double sales; } |
The Flutter Line Chart represents and visualizes time-dependent data to show the trends at equal intervals. It supports numeric, category, date-time, or logarithmic axis of a graph
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
class BarChartExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Bar Chart Example'), ), body: SfCartesianChart( series: [ BarSeries<SalesData, double>( dataSource: <SalesData>[ SalesData(1, 35), SalesData(2, 28), SalesData(3, 34), SalesData(4, 32), SalesData(5, 34), SalesData(6, 42), SalesData(7, 34), SalesData(8, 32), ], xValueMapper: (SalesData sales, _) => sales.year, yValueMapper: (SalesData sales, _) => sales.sales, ), ], ), ); } } class SalesData { SalesData(this.year, this.sales); final double year; final double sales; } |
The Flutter Bar Chart and Graph is used to compare the frequency, count, total, or average of data in different categories. They are ideal for showing variations in the value of an item over time.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
class PieChartExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Pie Chart Example'), ), body: SfCircularChart( series: <CircularSeries>[ PieSeries<SalesData, int>( dataSource: [ SalesData(1, 35), SalesData(2, 28), SalesData(3, 34), SalesData(4, 32), SalesData(5, 34), SalesData(6, 42), SalesData(7, 34), SalesData(8, 32), ], xValueMapper: (SalesData sales, _) => sales.year, yValueMapper: (SalesData sales, _) => sales.sales, ), ], ), ); } } class SalesData { SalesData(this.year, this.sales); final int year; final double sales; } |
The Flutter Pie Chart is a circular graphic, which is ideal for displaying proportional values in different categories. You can create beautiful, animated, real-time and high-performance pie chart that also supports the interactive features such as explode, tooltip and selection.
syncfusion_flutter_charts in Flutter In this blog we’ve learned how to use the LineGraph in Flutter app.
Users can visit the syncfusion_flutter_charts GitHub page for more examples.
Thanks for reading this blog. You can also check other blogs here for more information
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.