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 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 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.