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


The Flutter Line Chart represents and visualizes time-dependent data to show the trends at equal intervals. It supports numeric, category, date-time, or logarithmic axis of a graph. You can create beautiful, animated, real-time and high-performance line chart that also supports the interactive features such as zooming and panning, trackball, crosshair, tooltip and selection.

Beautiful Flutter Line Chart

Key features

Flutter chart provides fast line support to display large amount of data

Fast line

Displays thousands of data within a few seconds. Experience smooth interactions.

The Flutter Line Graph shows the empty or null point support

Empty point

Empty or null data points are elegantly handled in the Flutter Line Chart.

Shows the Flutter vertical line chart

Vertical line

Rotate the Flutter Line Chart to plot data in a vertical direction and view data from a different perspective.

Flutter chart shows the marker support in line graph


Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons. In addition to these shapes, use images to make the point more attractive.

Flutter line chart shows the multiple axis support

Multiple axes

Use multiple axes to plot different data sets that widely vary from one other.

Code example

Easily get started with the Flutter Line Chart using a few simple lines of DART code example as demonstrated below,

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

    Widget build(BuildContext context) {
        final List<SalesData> chartData = [
            SalesData(2010, 35),
            SalesData(2011, 28),
            SalesData(2012, 34),
            SalesData(2013, 32),
            SalesData(2014, 40)

        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        primaryXAxis: DateTimeAxis(),
                        series: <CartesianSeries>[
                            // Renders line chart
                            LineSeries<SalesData, DateTime>(
                                dataSource: chartData,
                                xValueMapper: (SalesData sales, _) => sales.year,
                                yValueMapper: (SalesData sales, _) => sales.sales

    class SalesData {
        SalesData(this.year, this.sales);
        final DateTime year;
        final double sales;

Learning resources

Navigate to GitHub code used to configure the Flutter line chart

GitHub Code

The Flutter Line Chart configuration code is available in GitHub.

Navigate to the options available in User Guide to customize the Flutter line chart

Flutter Line Chart User Guide

Learn available options to customize the Flutter Line Chart.

Navigate to the API references documentation of Flutter line chart

Flutter Line Chart API Reference

Explore the Flutter Line Chart APIs.

Scroll up 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