Syncfusion Flutter charts

Rahul Gupta

11 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 :

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

Add manually in the yaml file.

Then run the “Flutter pub get” command.

Line Chart :

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: &#091;
            LineSeries&lt;SalesData, double&gt;(
              dataSource: &lt;SalesData&gt;&#091;
                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, _) =&gt; sales.year,
              yValueMapper: (SalesData sales, _) =&gt; sales.sales,
            ),
          ],
        ),
      ),
    );
  }
}

class SalesData {
  SalesData(this.year, this.sales);
  final double year;
  final double sales;
}

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 :-

class BarChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bar Chart Example'),
      ),
      body: SfCartesianChart(
        series: &#091;
       
          BarSeries&lt;SalesData, double&gt;(
            dataSource: &lt;SalesData&gt;&#091;
              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, _) =&gt; sales.year,
            yValueMapper: (SalesData sales, _) =&gt; sales.sales,
          ),
        ],
      ),
    );
  }
}

class SalesData {
  SalesData(this.year, this.sales);
  final double year;
  final double sales;
}

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 :

class PieChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pie Chart Example'),
      ),
      body: SfCircularChart(
        series: &lt;CircularSeries&gt;&#091;
          PieSeries&lt;SalesData, int&gt;(
            dataSource: &#091;
              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, _) =&gt; sales.year,
            yValueMapper: (SalesData sales, _) =&gt; sales.sales,
          ),
        ],
      ),
    );
  }
}


class SalesData {
  SalesData(this.year, this.sales);

  final int year;
  final double sales;
}

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