Articles in this section
Category / Section

How to integrate Syncfusion charts in Flutter Windows application (SfCartesianChart)

2 mins read

In this article, we have described how to integrate Syncfusion® Flutter chart in Flutter windows.

Step 1Create a new Flutter application project using the instructions given in the Getting Started with your first Flutter app documentation.

Step 2: Add the following code in your pubspec.yaml file to install the Syncfusion® Flutter chart package in your application. It will be automatically downloaded from the pub once you trigger the flutter pub get comment or click the Get packages option from the Visual Studio code.

dependencies:
  syncfusion_flutter_charts: ^19.4.52

Step 3: Add the following code in lib/main.dart file to create a simple line chart.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_core/core.dart';
 
void main() {
  return runApp(ChartApp());
}
 
class ChartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chart Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  // ignore: prefer_const_constructors_in_immutables
  MyHomePage({Key? key}) : super(key: key);
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  late TooltipBehavior _tooltipBehavior;
 
  @override
  void initState() {
    _tooltipBehavior = TooltipBehavior(enable: true);
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Syncfusion Flutter chart'),
        ),
        body: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            // Chart title
            title: ChartTitle(text: 'Half yearly sales analysis'),
            // Enable legend
            legend: Legend(isVisible: true),
            // Enable tooltip
            tooltipBehavior: _tooltipBehavior,
            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))
            ]));
  }
}
 
class SalesData {
  SalesData(this.year, this.sales);
 
  final String year;
  final double sales;
}

Step 4: Run the application on windows using the flutter run -d windows command. Thus, the SfCartesianChart widget is rendered on windows desktop application and can be found in below screenshot. With Flutter SDK v2.10.0 or higher, no need to enable desktop support on windows, it is enabled by default.

Flutter chart - windows

For more information on building windows desktop application, find the user guide here.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied