How to integrate Syncfusion charts in Flutter web application (SfCartesianChart) ?
In this article, we described how to integrate Syncfusion® Flutter charts in Flutter web applications.
As Flutter has released web support on their Flutter Beta channel, we also provide web support for our Syncfusion® Flutter chart package. Follow these instructions to integrate the Syncfusion® Flutter chart package in web applications.
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 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: <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;
}
In the above code snippet, you need to register the license in the main method using the SyncfusionLicense.registerLicense() method available in the Syncfusion® Core package to avoid the Syncfusion® license pop-up at 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 menu.
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 one of the following commands 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.
