Using Syncfusion Flutter Charts in Your Flutter Project

Using Syncfusion Flutter Charts in Your Flutter Project

Quick guide to Syncfusion Flutter Charts

Atuoha Anthony's photo
Atuoha Anthony
·

13 min read

Flutter offers a variety of tools and packages to create stunning and interactive charts for your mobile applications. One such powerful charting library is Syncfusion Flutter Charts. This package provides a wide range of charts that can be easily integrated into your Flutter project, allowing you to visualize your data in a meaningful way. In this article, we will guide you through the process of setting up a new Flutter project and incorporating Syncfusion Flutter Charts to create various types of charts.

Setting Up a New Flutter Project

Before we begin using Syncfusion Flutter Charts, make sure you have Flutter and Dart installed on your machine. If not, follow the installation instructions on the official Flutter website: Flutter Installation Guide.

Once Flutter is set up, create a new Flutter project by running the following commands in your terminal:

flutter create my_flutter_charts_project
cd my_flutter_charts_project

Now, open your project in your preferred IDE (Integrated Development Environment) like Visual Studio Code or Android Studio.

Adding Syncfusion Flutter Charts to pubspec.yaml

To use Syncfusion Flutter Charts, you need to add the corresponding package to your pubspec.yaml file. Open the file and add the following dependency:

dependencies:
  syncfusion_flutter_charts: ^24.1.45

Then, run the following command to fetch and install the package:

flutter pub get

This will download and add Syncfusion Flutter Charts to your project.

Creating Different Types of Charts

Syncfusion Flutter Charts offers a variety of chart types, including Line Chart, Bar Chart, Pie Chart, and more. Let's explore how to create and customize these charts in your Flutter project.

Line Chart

To create a simple Line Chart, follow these steps:

  1. Import the necessary libraries:
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
  1. Create a SfCartesianChart widget and define the data:
class LineChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Line Chart Example'),
      ),
      body: SfCartesianChart(
        series: <ChartSeries>[
          LineSeries<SalesData, double>(
            dataSource: <SalesData>[
              SalesData(1, 35),
              SalesData(2, 28),
              SalesData(3, 34),
              SalesData(4, 32),
            ],
            xValueMapper: (SalesData sales, _) => sales.year,
            yValueMapper: (SalesData sales, _) => sales.sales,
          ),
        ],
      ),
    );
  }
}

class SalesData {
  SalesData(this.year, this.sales);
  final double year;
  final double sales;
}
  1. Run your application, and you should see a basic Line Chart displaying the provided data.

Bar Chart

Creating a Bar Chart is similar to creating a Line Chart. Import the necessary libraries and modify the widget as follows:

class BarChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bar Chart Example'),
      ),
      body: SfCartesianChart(
        series: <ChartSeries>[
          BarSeries<SalesData, double>(
            dataSource: <SalesData>[
              SalesData(1, 35),
              SalesData(2, 28),
              SalesData(3, 34),
              SalesData(4, 32),
            ],
            xValueMapper: (SalesData sales, _) => sales.year,
            yValueMapper: (SalesData sales, _) => sales.sales,
          ),
        ],
      ),
    );
  }
}

Now, you have a basic Bar Chart displaying the provided data.

Pie Chart

Creating a Pie Chart follows a similar pattern:

class PieChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pie Chart Example'),
      ),
      body: SfCircularChart(
        series: <CircularSeries>[
          PieSeries<SalesData, double>(
            dataSource: <SalesData>[
              SalesData(1, 35),
              SalesData(2, 28),
              SalesData(3, 34),
              SalesData(4, 32),
            ],
            xValueMapper: (SalesData sales, _) => sales.year,
            yValueMapper: (SalesData sales, _) => sales.sales,
          ),
        ],
      ),
    );
  }
}

This creates a simple Pie Chart with the provided data.

Let's delve deeper into Syncfusion Flutter Charts and explore more advanced features and customization options.

Customizing Axis and Labels

Syncfusion Flutter Charts allow you to customize the appearance of axis lines, labels, and ticks. Here's an example of how to customize the primary X-axis and Y-axis in a Line Chart:

SfCartesianChart(
  primaryXAxis: NumericAxis(
    title: AxisTitle(text: 'Years'),
    majorGridLines: MajorGridLines(width: 0),
  ),
  primaryYAxis: NumericAxis(
    title: AxisTitle(text: 'Sales'),
    majorGridLines: MajorGridLines(width: 0),
  ),
  // ... other chart properties and series
)

This code snippet adds titles to the X and Y axes, and it removes the major grid lines for a cleaner appearance.

Adding Legends

Legends provide additional context to your charts by explaining the meaning of various data series. Here's how you can add a legend to your Line Chart:

SfCartesianChart(
  legend: Legend(isVisible: true),
  series: <ChartSeries>[
    // ... your series
  ],
)

This will display a legend at the top of your chart, automatically generated based on the data series you've defined.

Tooltip and Data Labels

To make your charts more informative, you can add tooltips and data labels. Tooltips provide additional information when users interact with data points, and data labels display the actual values on the chart. Here's how you can enable them:

SfCartesianChart(
  series: <ChartSeries>[
    LineSeries<SalesData, double>(
      dataSource: <SalesData>[
        // ... your data
      ],
      dataLabelSettings: DataLabelSettings(isVisible: true),
      enableTooltip: true,
    ),
  ],
)

Now, when users interact with data points, tooltips will appear, and data labels will be displayed on the chart.

Styling and Theming

Syncfusion Flutter Charts offer extensive options for styling and theming your charts. You can customize colors, line styles, and other visual aspects to match the look and feel of your app. Here's a quick example of customizing the appearance of a Line Series:

LineSeries<SalesData, double>(
  dataSource: <SalesData>[
    // ... your data
  ],
  color: Colors.blue, // Set the line color
  width: 2, // Set the line width
  markerSettings: MarkerSettings(color: Colors.red), // Customize data point markers
)

You can experiment with various style properties to achieve the desired visual effect.

Dynamic Updates and Animation

Syncfusion Flutter Charts support dynamic updates and animations. You can add or remove data points dynamically, and the chart will smoothly update. Additionally, you can enable animations for a more visually appealing user experience:

SfCartesianChart(
  series: <ChartSeries>[
    LineSeries<SalesData, double>(
      dataSource: _chartData, // Use a dynamic data source
      animationDuration: 1000, // Set animation duration in milliseconds
    ),
  ],
)

By providing a dynamic data source and setting the animation duration, your chart will smoothly update when the data changes.

Integrating Syncfusion Flutter Chart with Firebase

Integrating Syncfusion Flutter Charts with Firebase allows you to create dynamic and real-time charts by fetching data from a Firebase database. In this example, we'll demonstrate how to use Firebase with Syncfusion Flutter Charts to dynamically update a Line Chart based on data stored in Firebase Firestore.

Setting up Firebase

  1. First, you need to set up Firebase for your Flutter project. Follow the instructions in the official documentation to add Firebase to your Flutter app: Add Firebase to your Flutter app

  2. After setting up Firebase, add the necessary dependencies to your pubspec.yaml file:

dependencies:
  firebase_core: ^latest_version
  cloud_firestore: ^latest_version

Run flutter pub get to fetch the dependencies.

  1. Initialize Firebase in your Flutter app. Typically, this is done in the main.dart file:
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Fetching Data from Firebase

Assuming you have a collection named 'sales' in your Firestore database with documents containing 'year' and 'sales' fields, let's fetch this data and use it in a Line Chart.

import 'package:cloud_firestore/cloud_firestore.dart';

class FirebaseChartExample extends StatefulWidget {
  @override
  _FirebaseChartExampleState createState() => _FirebaseChartExampleState();
}

class _FirebaseChartExampleState extends State<FirebaseChartExample> {
  final CollectionReference _salesCollection =
      FirebaseFirestore.instance.collection('sales');

  List<SalesData> _chartData = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Firebase Chart Example'),
      ),
      body: FutureBuilder(
        future: _getChartData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          } else {
            return SfCartesianChart(
              series: <ChartSeries>[
                LineSeries<SalesData, double>(
                  dataSource: _chartData,
                  xValueMapper: (SalesData sales, _) => sales.year,
                  yValueMapper: (SalesData sales, _) => sales.sales,
                ),
              ],
            );
          }
        },
      ),
    );
  }

  Future<void> _getChartData() async {
    QuerySnapshot querySnapshot = await _salesCollection.get();
    _chartData = querySnapshot.docs
        .map((doc) => SalesData(doc['year'], doc['sales']))
        .toList();
  }
}

In this example, the _getChartData function retrieves the data from the Firestore collection and converts it into a list of SalesData objects. The Line Chart is then built based on this dynamic data.

Remember to replace 'sales' with the actual name of your Firestore collection and adjust the document field names accordingly.

Real-Time Updates

For real-time updates, consider using Firebase streams. Modify the _getChartData function to listen to real-time changes:

StreamSubscription<QuerySnapshot> _subscription;

@override
void initState() {
  super.initState();
  _subscription = _salesCollection.snapshots().listen((querySnapshot) {
    setState(() {
      _chartData = querySnapshot.docs
          .map((doc) => SalesData(doc['year'], doc['sales']))
          .toList();
    });
  });
}

@override
void dispose() {
  _subscription.cancel();
  super.dispose();
}

With this modification, your chart will automatically update in real-time whenever there are changes in the Firestore database.

This example demonstrates the basic integration of Syncfusion Flutter Charts with Firebase to create dynamic charts based on real-time data. Depending on your specific use case, you may need to adapt the code to suit your database structure and requirements.

Syncfusion Flutter Charts offer a comprehensive solution for creating visually appealing and interactive charts in your Flutter applications. By exploring the features mentioned above and referring to the official documentation and examples on GitHub, you can harness the full power of Syncfusion Flutter Charts to effectively visualize your data. Whether you're building a business dashboard or a data-driven mobile app, Syncfusion Flutter Charts provide the flexibility and customization options you need to create compelling visualizations.

Project utilization Snippets:

Model- (app_data.dart):

import 'package:flutter/cupertino.dart';

class AppData {
  AppData({
    required this.title,
    required this.number,
    required this.color,
    required this.icon,
    this.index = 0,
  });

  final String title;
  final dynamic number;
  final IconData icon;
  final Color color;
  int index;
}

Component - (vendor_chart.dart):

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import '../../models/app_data.dart';

class VendorDataGraph extends StatelessWidget {
  const VendorDataGraph({
    super.key,
    required this.data,
  });

  final List<AppData> data;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      height: 400,
      child: Card(
        color: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: SfCartesianChart(
          primaryXAxis: CategoryAxis(),
          // Chart title
          title: ChartTitle(
            text: 'Your Store Analysis',
          ),
          legend: Legend(isVisible: true),
          // Enable tooltip
          tooltipBehavior: TooltipBehavior(enable: true),
          series: <ChartSeries<AppData, String>>[
            LineSeries<AppData, String>(
              dataSource: data,
              xValueMapper: (AppData sales, _) => sales.title,
              yValueMapper: (AppData sales, _) => sales.number,
              name: 'Numbers',
              // Enable data label
              dataLabelSettings: const DataLabelSettings(isVisible: true),
            )
          ],
        ),
      ),
    );
  }
}

Dashboard - (vendor/dashboard.dart):

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:shoes_shop/constants/firebase_refs/collections.dart';
import '../../constants/color.dart';
import '../../resources/styles_manager.dart';
import '../../resources/values_manager.dart';
import '../components/vendor_chart.dart';
import '../components/build_vendor_dash_container.dart';
import '../widgets/vendor_logout_ac.dart';
import '../widgets/vendor_welcome_intro.dart';
import '../../models/app_data.dart';

class VendorDashboard extends StatefulWidget {
  const VendorDashboard({Key? key}) : super(key: key);

  @override
  State<VendorDashboard> createState() => _VendorDashboardState();
}

class _VendorDashboardState extends State<VendorDashboard> {
  var vendorId = FirebaseAuth.instance.currentUser!.uid;
  var orders = 0;
  var availableFunds = 0.0;
  var products = 0;

  Future<void> fetchData() async {
    // init because of refresh indicator
    setState(() {
      orders = 0;
      availableFunds = 0.0;
      products = 0;
    });

    // orders
    await FirebaseCollections.ordersCollection
        .where('vendorId', isEqualTo: vendorId)
        .get()
        .then(
          (QuerySnapshot data) => {
            setState(() {
              orders = data.docs.length;
            }),

            // checkouts
            for (var doc in data.docs)
              {
                if (!doc['isDelivered'])
                  {
                    setState(() {
                      availableFunds += doc['prodPrice'] * doc['prodQuantity'];
                    })
                  }
              }
          },
        );

    // products
    await FirebaseCollections.productsCollection
        .where('vendorId', isEqualTo: vendorId)
        .get()
        .then(
          (QuerySnapshot data) => {
            setState(() {
              products = data.docs.length;
            }),
          },
        );
  }

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    List<AppData> data = [
      AppData(
        title: 'All Orders',
        number: orders,
        color: dashBlue,
        icon: Icons.shopping_cart_checkout,
        index: 1,
      ),
      AppData(
        title: 'Available Funds',
        number: availableFunds,
        color: dashGrey,
        icon: Icons.monetization_on,
        index: 3,
      ),
      AppData(
        title: 'Products',
        number: products,
        color: dashRed,
        icon: Icons.shopping_bag,
        index: 2,
      ),
    ];

    return Scaffold(
      body: RefreshIndicator(
        color: accentColor,
        onRefresh: () => fetchData(),
        child: SingleChildScrollView(
          physics: const AlwaysScrollableScrollPhysics(),
          child: Padding(
            padding: EdgeInsets.only(
              top: MediaQuery.of(context).padding.top,
              right: 18,
              left: 18,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    VendorWelcomeIntro(),
                    VendorLogoutAc(),
                  ],
                ),
                const SizedBox(height: AppSize.s10),
                SizedBox(
                  height: MediaQuery.of(context).size.height / 6.5,
                  child: ListView.builder(
                    itemCount: data.length,
                    padding: EdgeInsets.zero,
                    shrinkWrap: true,
                    // crossAxisCount: 3,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (context, index) {
                      var item = data[index];

                      return BuildDashboardContainer(
                        title: item.title,
                        value: item.index == 3
                            ? '\$${item.number}'
                            : item.number.toString(),
                        color: item.color,
                        icon: item.icon,
                        index: item.index,
                      );
                    },
                  ),
                ),
                const SizedBox(height: 20),
                Text(
                  'Your store analysis',
                  style: getMediumStyle(color: Colors.black),
                ),
                const SizedBox(height: 10),
                VendorDataGraph(data: data)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Web App Components - (category_pie.dart):

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

import '../../models/chart_sample.dart';


class CategoryDataPie extends StatelessWidget {
  const CategoryDataPie({
    super.key,
    required this.chartSampleData,
  });

  final List<ChartSampleData> chartSampleData;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      height: 400,
      child: Card(
        color: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: _buildDefaultPieChart(chartSampleData),
      ),
    );
  }
}

/// Returns the circular  chart with pie series.
SfCircularChart _buildDefaultPieChart(List<ChartSampleData> chartSampleData) {
  return SfCircularChart(
    title: ChartTitle(text: 'Categories with Products Quantity'),
    legend: Legend(isVisible: true),
    series: _getDefaultPieSeries(chartSampleData),
  );
}

/// Returns the pie series.
List<PieSeries<ChartSampleData, String>> _getDefaultPieSeries(List<ChartSampleData> chartSampleData) {
  return <PieSeries<ChartSampleData, String>>[
    PieSeries<ChartSampleData, String>(
      explode: true,
      explodeIndex: 0,
      explodeOffset: '10%',
      dataSource: chartSampleData

      ,
      xValueMapper: (ChartSampleData data, _) => data.x,
      yValueMapper: (ChartSampleData data, _) => data.y,
      dataLabelMapper: (ChartSampleData data, _) => data.text,
      startAngle: 90,
      endAngle: 90,
      dataLabelSettings: const DataLabelSettings(isVisible: true),
    ),
  ];
}

app_graph.dart:

import 'package:flutter/material.dart';
import 'package:shoes_shop_admin/helpers/screen_size.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

import '../../models/app_data.dart';

class AppDataGraph extends StatelessWidget {
  const AppDataGraph({
    super.key,
    required this.data,
  });

  final List<AppData> data;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      height: 400,
      child: Card(
        color: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: SfCartesianChart(
          primaryXAxis: CategoryAxis(),
          // Chart title
          title: ChartTitle(
            text: 'ShoesShop Analysis for app data',
          ),
          legend: Legend(isVisible: true),
          // Enable tooltip
          tooltipBehavior: TooltipBehavior(enable: true),
          series: <ChartSeries<AppData, String>>[
            LineSeries<AppData, String>(
              dataSource: data,
              xValueMapper: (AppData sales, _) => sales.title,
              yValueMapper: (AppData sales, _) => sales.number,
              name: 'Numbers',
              // Enable data label
              dataLabelSettings: const DataLabelSettings(isVisible: true),
            )
          ],
        ),
      ),
    );
  }
}

Dashboard:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:shoes_shop_admin/constants/color.dart';
import '../../models/app_data.dart';
import '../../models/chart_sample.dart';
import '../components/app_data_graph.dart';
import '../components/category_pie_data.dart';
import '../widgets/build_dashboard_container.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final TextEditingController searchText = TextEditingController();

  var orders = 0;
  var cashOuts = 0;
  var users = 0;
  var categories = 0;
  var vendors = 0;
  var products = 0;

  // chart sample data
  List<ChartSampleData> chartSampleData = [];

  // fetch categories with product count
  Future<void> fetchCategoriesWithData() async {
    List<String> categories = [];

    await FirebaseFirestore.instance
        .collection('categories')
        .get()
        .then((QuerySnapshot snapshot) {
      for (var doc in snapshot.docs) {
        categories.add(doc['category']);
      }
    }).whenComplete(
      () async {
        for (var category in categories) {
          int number = 0;
          await FirebaseFirestore.instance
              .collection('products')
              .where('category', isEqualTo: category)
              .get()
              .then((QuerySnapshot snapshot) {
            number = snapshot.docs.length;
          });

          setState(() {
            chartSampleData.add(
              ChartSampleData(
                x: category,
                y: number == 0 ? 0.1: number,
                text: category,
              ),
            );
          });
        }
      },
    );
  }

  Future<void> fetchData() async {
    // orders
    await FirebaseFirestore.instance.collection('orders').get().then(
          (QuerySnapshot data) => {
            setState(() {
              orders = data.docs.length;
            }),
          },
        );

    // products
    await FirebaseFirestore.instance.collection('products').get().then(
          (QuerySnapshot data) => {
            setState(() {
              products = data.docs.length;
            }),
          },
        );

    // users
    await FirebaseFirestore.instance.collection('customers').get().then(
          (QuerySnapshot data) => {
            setState(() {
              users = data.docs.length;
            }),
          },
        );

    // categories
    await FirebaseFirestore.instance.collection('categories').get().then(
          (QuerySnapshot data) => {
            setState(() {
              categories = data.docs.length;
            }),
          },
        );

    // checkouts
    await FirebaseFirestore.instance.collection('cash_outs').get().then(
          (QuerySnapshot data) => {
            setState(() {
              cashOuts = data.docs.length;
            }),
          },
        );

    // vendors
    await FirebaseFirestore.instance.collection('vendors').get().then(
          (QuerySnapshot data) => {
            setState(() {
              vendors = data.docs.length;
            }),
          },
        );
  }

  @override
  void initState() {
    super.initState();
    fetchData();
    fetchCategoriesWithData();
  }

  @override
  Widget build(BuildContext context) {
    // data
    List<AppData> data = [
      AppData(
        title: 'Orders',
        number: orders,
        color: dashBlue,
        icon: Icons.shopping_cart_checkout,
        index: 2,
      ),
      AppData(
        title: 'Cash Outs',
        number: cashOuts,
        color: dashGrey,
        icon: Icons.monetization_on,
        index: 6,
      ),
      AppData(
        title: 'Products',
        number: products,
        color: dashOrange,
        icon: Icons.shopping_bag,
        index: 1,
      ),
      AppData(
        title: 'Vendors',
        number: vendors,
        color: dashPurple,
        icon: Icons.group,
        index: 3,
      ),
      AppData(
        title: 'Categories',
        number: categories,
        color: dashRed,
        icon: Icons.category_outlined,
        index: 5,
      ),
      AppData(
        title: 'Users',
        number: users,
        color: dashTeal,
        icon: Icons.group,
        index: 7,
      ),
    ];

    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.black12, bgColor],
              begin: Alignment.topCenter,
              end: Alignment.center,
              stops: [1, 30],
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: LayoutBuilder(builder:
                    (BuildContext context, BoxConstraints constraints) {
                  final screenWidth = constraints.maxWidth;
                  const desiredItemWidth = 180.0;
                  final crossAxisCount =
                      (screenWidth / desiredItemWidth).floor();

                  return GridView.builder(
                    itemCount: data.length,
                    padding: EdgeInsets.zero,
                    shrinkWrap: true,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: crossAxisCount),
                    itemBuilder: (context, index) => BuildDashboardContainer(
                      title: data[index].title,
                      value: data[index].number,
                      color: data[index].color,
                      icon: data[index].icon,
                      index: data[index].index,
                    ),
                  );
                }),
              ),
              Padding(
                padding: const EdgeInsets.all(18.0),
                child: LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                    if (constraints.maxWidth > 600) {
                      return Row(
                        children: [
                          Expanded(flex: 3, child: AppDataGraph(data: data)),
                          const SizedBox(width: 30),
                          Expanded(
                            child: chartSampleData.isNotEmpty
                                ? CategoryDataPie(
                                    chartSampleData: chartSampleData,
                                  )
                                : SizedBox.shrink(),
                          ),
                        ],
                      );
                    } else {
                      return Column(
                        children: [
                          AppDataGraph(data: data),
                          const SizedBox(width: 30),
                          CategoryDataPie(chartSampleData: chartSampleData),
                        ],
                      );
                    }
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Additional Examples

For more examples and customization options, refer to the official Syncfusion Flutter Charts documentation: Syncfusion Flutter Charts Documentation

You can find additional examples and detailed documentation on the Syncfusion GitHub repository: Syncfusion Flutter Charts GitHub Repository

Feel free to explore different chart types, customize appearance, and add interactivity to meet your specific requirements. Syncfusion Flutter Charts provides a powerful and flexible solution for visualizing data in your Flutter applications.

Did you find this article valuable?

Support Atuoha Anthony by becoming a sponsor. Any amount is appreciated!

Flutterflutter-aware