How to integrate Syncfusion charts in Flutter Windows application (SfCartesianChart)
In this article, we have described how to integrate Syncfusion® Flutter chart in Flutter windows.
Step 1: Create 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.
For more information on building windows desktop application, find the user guide here.
