We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Flutter |
Control: SfCartesianChart |
Published Date: May 20, 2020 |
Last Revised Date: April 12, 2021

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.

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon