syncfusion_flutter_charts 17.3.26

  • Readme
  • Changelog
  • Example
  • Installing
  • 95

syncfusion_flutter_chart_banner

Syncfusion Flutter Charts #

Syncfusion Flutter Charts is a data visualization library written natively in Dart for creating beautiful and high-performance charts, which are used to craft high-quality mobile app user interfaces using Flutter.

Overview #

Create various types of cartesian or circular charts with seamless interaction, responsiveness, and smooth animation. It has a rich set of features, and it is completely customizable and extendable.

Disclaimer: This is a commercial package. To use this package, you need to have either Syncfusion Commercial License or Syncfusion Community license. For more details, please check the LICENSE file.

Table of contents #

Chart features #

  • Chart types - Provides functionality for rendering 20+ chart types, namely line, spline, column, bar, area, bubble, scatter, step line, fast line, range column, stacked line, stacked area, stacked column, stacked bar, pie, doughnut, radial bar, pyramid, funnel, etc. Each chart type is easily configured and customized with built-in features for creating stunning visual effects. flutter_chart_types

  • Axis types - Plot various types of data in a graph with the help of numeric, category, date-time and log axis types. The built-in axis features allow to customize an axis elements further to make the axis more readable. flutter_chart_axis_types

  • User interaction - The end-user experience is greatly enhanced by including the user interaction features such as zooming and panning, crosshair, trackball, events, selection, and tooltip in chart. flutter_chart_user_interactions

  • Legends - Display additional information about the chart series. The chart legend can also be used to collapse the series. The legends can be wrapped or scrolled if an item exceeds the available bounds.

  • Dynamic update - Updates the chart dynamically with live data that changes over seconds or minutes like stock prices, temperature, speed, etc.

Get the demo application #

Explore the full capabilities of our Flutter widgets on your device by installing our sample browser applications from the below app stores, and view samples code in GitHub.

Take a look at the following to learn more about Syncfusion Flutter charts:

Installation #

Install the latest version from pub.

Getting started #

Import the following package.

import 'package:syncfusion_flutter_charts/charts.dart';

Add chart to the widget tree #

Add the chart widget as a child of any widget. Here, the chart widget is added as a child of container widget.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfCartesianChart(
          )
        )
      )
  );
}

Bind data source #

Based on data, initialize the appropriate axis type and series type. In the series, map the data source and the fields for x and y data points. To render a line chart with category axis, initialize appropriate properties.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfCartesianChart(
            // Initialize category axis
            primaryXAxis: CategoryAxis(),

            series: <LineSeries<SalesData, String>>[
              LineSeries<SalesData, String>(
                // Bind data source
                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
              )
            ]
          )
        )
      )
  );
}

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

Note

  • Use SfCartesianChart widget to render line, spline, area, column, bar, bubble, scatter, step line, and fast line charts.
  • Use SfCircularChart widget to render pie, doughnut, and radial bar charts.
  • Use SfPyramidChart and SfFunnelChart to render pyramid and funnel charts respectively.

Add chart elements #

Add the chart elements such as title, legend, data label, and tooltip to display additional information about the data plotted in the chart.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfCartesianChart(

            primaryXAxis: CategoryAxis(),
            // Chart title
            title: ChartTitle(text: 'Half yearly sales analysis'),
            // Enable legend
            legend: Legend(isVisible: true),
            // Enable tooltip
            tooltipBehavior: TooltipBehavior(enable: true),

            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)
              )
            ]
          )
        )
      )
  );
}

The following screenshot illustrates the result of the above code sample.

simple line chart

Support and Feedback #

  • For any other queries, reach our Syncfusion support team or post the queries through the Community forums and submit a feature request or a bug through our Feedback portal.
  • To renew the subscription, click renew or contact our sales team at salessupport@syncfusion.com | Toll Free: 1-888-9 DOTNET.

About Syncfusion #

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 20,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today we provide 1,000+ controls and frameworks for web (ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Blazor, mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (WinForms, WPF, and UWP). We provide ready-to deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

[17.3.26] - 11/05/2019

Bug fixes

  • Data labels are positioned properly and will not collide with the y-axis.
  • Now exception will not be thrown while using the chart with tooltip template in the tab widget.

[17.3.14] - 10/03/2019

Breaking changes

  • roundingPlace property has been changed to decimalPlaces in the axis and tooltip.
  • child property has been changed to widget in chart annotation.
  • position property has been changed to labelAlignment in dataLabelSettings.
  • imageUrl property has been changed to image in markerSettings.
  • backgroundImageUrl property has been changed to backgroundImage in SfCartesianChart.
  • initialSelectedDatIndexes property has been moved to series from SfCartesianChart.

Bug fixes

  • Tooltip format with point.y value is working properly now.
  • Bar chart with negative values is rendering properly now.

[1.0.0-beta.5] - 09/17/2019

Features

  • Stacked line, stacked area, stacked column, stacked bar, range column, pyramid and funnel chart types.
  • Logarithmic axis.
  • Axis crossing support.
  • Plot bands and recursive plot bands support.
  • Dynamic data source update animation.

Bug fixes

  • Tooltip template will not be displayed for hidden series.
  • Now the axis interval will be calculated properly for small decimal values.
  • Normal range padding is working fine for category axis.
  • Few more improvements and bug fixes.

[1.0.0-beta.4] - 08/29/2019

Bug fixes

  • Now, the category axis will work properly with additional range padding.
  • Now, the column series of category axis with a point can be placed on the ticks.
  • Trackball interactive tooltip will be shown only for the visible series.
  • On panning with grid lines, the grid lines will be moved within the chart area.
  • Panning will work properly on adding or removing the chart series dynamically.
  • Now, the data labels will not be hidden on scrolling.
  • The circular chart will render at the center position along with the legend.
  • Now, the panning is working properly for the inversed axis.
  • Now, the data labels appearance can be customized using onDataLabelRender event.
  • The tooltip and explode in the circular charts will work together. properly.
  • The scatter series is rendering properly with image markers.
  • Few more improvements and bug fixes.

[1.0.0-beta] - 07/16/2019

Initial release.

Features

  • Line, spline, area, column, bar, bubble, scatter, step line, fast line, pie, doughnut and radial bar chart types.
  • Numeric, category and date time axis types.
  • User interactive features like zooming and panning, trackball, crosshair, selection and tooltip.
  • Additional features like animation, marker, data label, empty points, legend, annotation and much more.

example/main.dart

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

void main() {
  // Register your license here
  SyncfusionLicense.registerLicense(null);
  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> {
  @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(enable: true),
            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;
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  syncfusion_flutter_charts: ^17.3.26

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:syncfusion_flutter_charts/charts.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
95
Health:
Code health derived from static analysis. [more]
94
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
95
Learn more about scoring.

We analyzed this package on Dec 10, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.1+4
  • Flutter: 1.12.13+hotfix.4

Health suggestions

Fix lib/src/chart/axis/numeric_axis.dart. (-1 points)

Analysis of lib/src/chart/axis/numeric_axis.dart reported 2 hints:

line 175 col 13: The value of the field '_axisPadding' isn't used.

line 176 col 13: The value of the field '_innerPadding' isn't used.

Fix lib/src/chart/chart_series/stacked_series_base.dart. (-1 points)

Analysis of lib/src/chart/chart_series/stacked_series_base.dart reported 2 hints:

line 143 col 7: The value of the field '_rectPosition' isn't used.

line 144 col 7: The value of the field '_rectCount' isn't used.

Fix lib/src/chart/axis/logarithmic_axis.dart. (-0.50 points)

Analysis of lib/src/chart/axis/logarithmic_axis.dart reported 1 hint:

line 175 col 8: The declaration '_findAxisMinMax' isn't referenced.

Fix additional 11 files with analysis or formatting issues. (-4 points)

Additional issues in the following files:

  • lib/src/chart/chart_series/scatter_series.dart (1 hint)
  • lib/src/chart/user_interaction/tooltip_painter.dart (1 hint)
  • lib/src/circular_chart/base/circular_base.dart (1 hint)
  • lib/src/circular_chart/renderer/circular-series.dart (1 hint)
  • lib/src/funnel_chart/base/funnel_base.dart (1 hint)
  • lib/src/funnel_chart/renderer/funnel_series.dart (1 hint)
  • lib/src/pyramid_chart/base/pyramid_base.dart (1 hint)
  • lib/src/pyramid_chart/renderer/pyramid_series.dart (1 hint)
  • lib/src/chart/base/series_base.dart (Run flutter format to format lib/src/chart/base/series_base.dart.)
  • lib/src/chart/utils/helper.dart (Run flutter format to format lib/src/chart/utils/helper.dart.)
  • lib/src/circular_chart/base/series_base.dart (Run flutter format to format lib/src/circular_chart/base/series_base.dart.)

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
intl >=0.15.0 <0.17.0 0.16.0
syncfusion_flutter_core ^17.3.26 17.3.26
vector_math ^2.0.8 2.0.8
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
path 1.6.4
sky_engine 0.0.99
typed_data 1.1.6
url_launcher 5.2.7 5.4.0
url_launcher_platform_interface 1.0.1
utf 0.9.0+5