What’s New in 2020 Volume 3: Flutter Charts
By: Rajeshwari Pandinagarajan
Tags: Flutter, Android App Development, Mobile App Development, Charts, iOS App Development

At Syncfusion, we are continuously reviewing the constructive questions and comments we receive from our customers, which include various feature requests. From these, we handpicked the most widely requested features and made them available in the Essential Studio 2020 Volume 3 release.

In this blog post, I’ll quickly review the new chart types and features included in the Flutter Charts widget for the 2020 Volume 3 release.

Let’s see them!

New chart types

We extended the Syncfusion Flutter Charts widget to support two more chart types:

Box and whisker chart

Waterfall chart

Box and whisker chart

The box and whisker chart is used to visualize a group of numerical data through its quartiles. It is also referred to as a box plot. Box plots may also have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles.

Refer to the following code.

[Dart]

SfCartesianChart(

series: <BoxAndWhiskerSeries<ChartData, String>>[

BoxAndWhiskerSeries<ChartData, String>(

dataSource: <ChartData>[

ChartData('Development', [22, 22, 23, 25, 25, 25, 26, 27, 27]), ChartData('HR', [22, 24, 25, 30, 32, 34, 36, 38, 39, 41]),

//...

],

showMean: true,

xValueMapper: (ChartData data, _) => data.x,

yValueMapper: (ChartData data, _) => data.y

),

]

)

After executing this code example, we will get output like in the following screenshot.

Box and whisker chart

UG link: https://help.syncfusion.com/flutter/cartesian-charts/chart-types#box-and-whisker-chart

SB sample link: https://flutter.syncfusion.com/#/cartesian-charts/chart-types/box-and-whisker/box-and-whisker-chart

Waterfall chart

The waterfall chart shows gradual changes in the quantitative value of an entity that is subjected to changes by increments or decrements. Using the waterfall chart, you can quickly illustrate changes in revenue.

Refer to the following code.

[Dart]

SfCartesianChart(

series: <ChartSeries<ChartData, double>>[

WaterfallSeries<ChartData, double>(

dataSource: <ChartData>[

ChartData(2, 10),

ChartData(3, -3),

ChartData(4, 5, true),

//...

ChartData(13, -5, false, true),

],

xValueMapper: (ChartData data, _) => data.x,

yValueMapper: (ChartData data, _) => data.y, intermediateSumPredicate: (ChartData data, _) =>

data.isIntermediate,

totalSumPredicate: (ChartData data, _) => data.isTotal, negativePointsColor: const Color.fromRGBO(229, 101, 144, 1), intermediateSumColor: const Color.fromRGBO(79, 129, 188, 1), totalSumColor: const Color.fromRGBO(79, 129, 188, 1), connectorLineSettings: WaterfallConnectorLineSettings(

width: 2.5,

dashArray: <double>[3, 1]

)

)

]

)

After executing this code example, we will get output like in the following screenshot.

Waterfall chart

UG link: https://help.syncfusion.com/flutter/cartesian-charts/chart-types#waterfall-chart

SB sample link: https://flutter.syncfusion.com/#/cartesian-charts/chart-types/waterfall/default-waterfall-chart

Feature enhancements

Exporting

A rendered chart can be exported and saved locally as a PNG image or PDF document for future use. The following code snippet shows exporting a chart as a PNG image.

[Dart]

dart_ui.Image data = await

_cartesianKey.currentState.toImage(pixelRatio: 3.0);

final bytes = await data.toByteData(format:

dart_ui.ImageByteFormat.png);

if (data != null) {

await Navigator.of(context).push(

MaterialPageRoute(

builder: (BuildContext context) {

return Scaffold(

body: Center(

child: Container(

color: Colors.white,

child: Image.memory(bytes.buffer.asUint8List()),

)

)

);

}

)

);

}

UG link — https://help.syncfusion.com/flutter/cartesian-charts/export-cartesian-chart

Trackball features

The trackball has the following new feature enhancements in this release.

Marker for trackball

The newly introduced trackball marker feature helps you indicate an exact data point location. You can also add a shape to adorn each data point when the trackball is visible. The trackball marker can be shown or hidden independently and also displayed based on the series marker’s visibility.

Refer to the following code.

[Dart]

SfCartesianChart(

trackballBehavior: TrackballBehavior(

enable: true,

markerSettings: TrackballMarkerSettings(

markerVisibility: TrackballVisibilityMode.visible

)

)

)

Trackball marker

Trackball tooltip overlap

From this Volume 3 release onwards, if there are two or more series data points rendered close to each other, then the trackball tooltips of each data point will not overlap with each other. They will be repositioned automatically. No API is required to enable this feature.

Refer to the following screenshot.

UG link: https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#trackball

SB sample link: https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/trackball/chart-with-trackball

Data label features

The data label feature has the following new enhancements in this release.

Padding for data labels

You can add padding to a data label to move it both vertically and horizontally from its initial position. Logical pixel value is provided as input.

Refer to the following code.

[Dart]

SfCartesianChart(

series: <CartesianSeries<ChartData,num>>[

SplineSeries<ChartData, num>(

dataLabelSettings: DataLabelSettings(

isVisible: true,

offset: Offset(0, 30)

)

)

]

)

Refer to the following screenshot.

Data label tap callback

This is a callback event. It will be triggered when you tap on a data label of a data point in the series.

Refer to the following code.

[Dart]

SfCartesianChart(

onDatalabelTapped: (DataLabelTapArgs args) {

print(args.seriesIndex);

},

series: <ChartSeries<ChartData, DateTime>>[

LineSeries<ChartData, DateTime>(

dataLabelSettings: DataLabelSettings(

isVisible: true

)

)

]

)

UG link: https://help.syncfusion.com/flutter/cartesian-charts/marker-datalabel#data-label

SB sample link: https://flutter.syncfusion.com/#/cartesian-charts/series-features/data-label/default-data-labels

Animate the series dynamically

You can perform initial rendering animation in an existing series by using this feature. On calling the animate method, a particular series will be animated based on the animationDuration property’s value in the series.

Refer to the following code.

[Dart]

Widget build(BuildContext context) {

ChartSeriesController _chartSeriesController;

return Column(

children: <Widget>[

Container(

child: SfCartesianChart(

series: <ChartSeries<ChartData, String>>[

ColumnSeries<ChartData, String>(

animationDuration: 2000,

onRendererCreated: (ChartSeriesController controller) { _chartSeriesController = controller;

}

)

],

)

),

Container(

child: RaisedButton(

onPressed: () {

_chartSeriesController?.animate();

},

child: Text('Animate'),

)

),

);

}

SB sample link : https://flutter.syncfusion.com/#/cartesian-charts/series-features/animation/series-animation

Select the data points dynamically

The data points in a chart can be selected programmatically by passing the point index and series index values to the selectDataPoints method.

Refer to the following code.

[Dart]

SfCartesianChart chart;

SelectionBehavior selection; @override

Widget build(BuildContext context) {

selection = SelectionBehavior(enable: true);

chart = SfCartesianChart(

series: <CartesianSeries>[

ColumnSeries<ChartData, double>(

selectionBehavior: selection

)

]

); return Scaffold(

body: Column(

children: <Widget>[

FlatButton(

child: Text('Select'),

onPressed: select

),

Container(child: chart)

]

)

);

} void select() {

selection.selectDataPoints(1, 0);

}

SB sample link: https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/selection/dynamic-selection

Anchor range to data points

This new feature is used to determine the value of the axis range, based on the visible data points or based on the overall data points available in the chart. The visible data points can be changed on performing interactions like pinch zooming, selection zooming, and panning, and also on specifying visibleMinimum and visibleMaximum values.

Refer to the following code.

[Dart]

SfCartesianChart(

primaryYAxis: NumericAxis(

anchorRangeToVisiblePoints: true

)

)

SB sample link: https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/zooming-and-panning/pinch-zooming

Breaking changes

The selectionSettings property and the SelectionSettings class have been deprecated. Now, you can use the selectionBehavior property and SelectionBehavior class, respectively, instead of them.

Refer to the following code.

[Dart]

SfCartesianChart(

series: <CartesianSeries<ChartData, double>>[

ColumnSeries<ChartData, double>(

selectionBehavior: SelectionBehavior(

// Enables selection

enable: true

)

)

]

);

Conclusion

I hope you now have a clear idea of the various new features and enhancements available for the Syncfusion Flutter Charts widget in the 2020 Volume 3 release. For more details about the bug fixes and other enhancements, check out our release notes.

Browse our documentation to learn more about our Syncfusion Flutter widgets. You can also see Syncfusion’s Flutter app with many examples in this GitHub repo. Don’t miss our demo app in Google Play and the App Store.

If you aren’t a customer yet, you can try our 30-day free trial to check out these features.

Also, if you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our support forum, feedback portal, or Direct-Trac support system. We are always happy to assist you!