Articles in this section
Category / Section

How to integrate Syncfusion charts in Flutter web application (SfCartesianChart) ?

5 mins read

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

 

  • In the Command Palette, type Flutter and choose Flutter: New Project.
  • 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.

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

 

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