How to integrate Syncfusion charts in Flutter web application (SfCartesianChart) ?
In this article, we described how to integrate Syncfusion Flutter charts in Flutter web.
As Flutter released the web support on their Flutter Beta channel, we also provided web support for our Syncfusion Flutter chart package. For integrating the Syncfusion Flutter chart package in web, you need to follow these instructions.
Step 1: Create a new Flutter application project.
- Open the Visual Studio code (After installing the Dart and Flutter extensions as stated in this setup editor page) and click View -> Command Palette.
- In the Command Palette, type Flutter and choose Flutter: New Project.
-
- Enter the Project name and press Enter and choose the location of the project.
Step 2: Add the following code in your pubspec.yaml file to install the Syncfusion Flutter Charts package in your application. It will be automatically downloaded from the pub once you trigger the flutter pub get, a comment or click the Get packages option from the Visual Studio code.
dependencies: syncfusion_flutter_charts: ^19.1.55+1
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: <ChartSeries<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;
}
In the previous code snippet, you need to register the license in the main method using the SyncfusionLicense.registerLicense() method available in the Syncfusion Core package so that you can avoid the Syncfusion license pop-up in the start of the application.
For further reference on generating and registering the Syncfusion license key, refer to the user guide.
Step 4: To enable web support.
- First, you need to change the Flutter SDK channel from Stable channel to Beta channel and enable web support by using the following commands.
- flutter channel beta
- flutter upgrade
- flutter config --enable-web
- After enabling web support, restart your IDE. You should now see Chrome (web) and Web Server (web) in the device pull-down.
Step 5: To add web support for the project.
- Run the following command from the root directory of the project.
- flutter create .
Step 6: To run your app from localhost in Chrome or Web-Server, enter the following command in the terminal.
- flutter run -d chrome (or) flutter run -d web-server
For more information on building web application using the Flutter, click here.
