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 :
1. Chart Types
Syncfusion Flutter Charts support various types of charts for different visualization needs:
- Line Chart: Displays data points connected by straight lines.
- Column Chart: Represents data with vertical bars.
- Bar Chart: Uses horizontal bars to display data.
- Area Chart: Shows data with filled areas under the lines.
- Pie Chart: Represents data as slices of a circle.
- Doughnut Chart: A pie chart with a central hole.
- Scatter Chart: Plots individual data points on Cartesian coordinates.
- Bubble Chart: Adds a third dimension to scatter charts with bubble sizes.
- Radar Chart: Displays data in a circular format with multiple axes.
- Stacked Column Chart: Stacks data in vertical bars to show cumulative values.
- Stacked Bar Chart: Stacks data in horizontal bars.
- Range Chart: Shows data with ranges between two values.
- Histogram: Displays data distribution across bins.
- Financial Chart: Includes candlestick and OHLC charts for financial data.
- Spline Chart: Features smooth curves connecting data points.
- Funnel Chart: Illustrates stages in a process with narrowing data.
2. Axis Types
Syncfusion Flutter Charts offer several axis types to customize data presentation:
- Primary Axis: The main axis for displaying data values.
- Secondary Axis: An additional axis for comparing different data series.
- Category Axis: Used for categorical data, such as months or product names.
- Date-Time Axis: Represents time-based data, ideal for time series.
- Numerical Axis: Shows numeric values, suitable for continuous data.
- Logarithmic Axis: Uses a logarithmic scale for large ranges of data.
3. User Interaction
Syncfusion Flutter Charts provide various interactive features to enhance user experience:
- Zooming and Panning: Allows users to zoom in and out and pan across the chart.
- Tooltip: Displays additional information when hovering over data points.
- Data Labels: Shows values directly on the chart elements.
- Selection: Enables selection of chart elements for detailed inspection.
- Crosshair: Displays a crosshair line to track data values on hover.
- Drilldown: Allows users to drill down into more detailed data.
4. Legends
Legends in Syncfusion Flutter Charts help identify different series and categories:
- Positioning: Place legends at various positions (top, bottom, left, right).
- Customization: Customize legend text, colors, and shapes.
- Interactive Legends: Allows clicking on legends to toggle the visibility of series.
- Legend Icons: Use symbols to represent different series or categories.
5. Dynamic Update
Syncfusion Flutter Charts support dynamic updates to reflect real-time changes:
- Live Data Updates: Automatically refresh charts with new data.
- Animation: Smoothly animate updates for a better user experience.
- Reactivity: Charts can respond to data changes and update visualizations accordingly.
- Data Binding: Easily bind chart data to dynamic sources, such as APIs or databases.
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.
Line Chart :
|
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; } |
Output
Line Chart
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
Bar Chart :-
|
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; } |
Output
Bar Chart
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.
Pie Chart :
|
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; } |
Output
Pie Chart
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.
Conclusion
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
Be the first to comment.