--- title: "What’s New in 2021 Volume 2: Flutter Charts" published_at: "2021-07-08T10:00:36+00:00" modified_at: "2024-11-20T07:54:24+00:00" url: "https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-2-flutter-charts" excerpt: "The Flutter Charts widget is a well-crafted control for visualizing data. It contains a rich gallery of over 30 charts and graphs, ranging from line to financial, that cater to all charting scenarios. In this blog post, I’ll quickly introduce..." taxonomy_category: - "Chart" - "Flutter" - "Mobile" - "Web" - "What's new" taxonomy_post_tag: - "Android" - "Data Visualization" - "Flutter" - "iOS" - "Linux" - "Mobile" --- # What’s New in 2021 Volume 2: Flutter Charts [Jayavigneshwaran G](https://www.syncfusion.com/blogs/author/jayavigneshwaran) ![What’s New in 2021 Volume 2: Flutter Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/What%E2%80%99s-New-in-2021-Volume-2-Flutter-Charts.png) The [Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts) widget is a well-crafted control for visualizing data. It contains a rich gallery of over 30 charts and graphs, ranging from line to financial, that cater to all charting scenarios. In this blog post, I’ll quickly introduce the new features included in the Flutter Charts widget for the [2021 Volume 2](https://www.syncfusion.com/forums/166800/essential-studio-2021-volume-2-main-release-v19-2-0-44-is-available-for-download) release. Let’s see them! ## Millisecond interval [DateTimeAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeAxis-class.html) and [DateTimeCategoryAxis](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeCategoryAxis-class.html) now support millisecond intervals. With this support, you can render the data points of a chart with millisecond differences. To achieve this, set the **[intervalType](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeAxis/intervalType.html)** property of the axis as **[DateTimeIntervalType.milliseconds](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeIntervalType.html) .** The following example shows how to render the date-time category axis with millisecond intervals in Flutter Charts. ``` [Dart] // Chart data source with millisecond date-time x values. final List chartData = [ LiveData(x: DateTime(2012, 10, 15, 00, 00, 01, 001), y: 30), LiveData(x: DateTime(2012, 10, 15, 00, 00, 01, 002), y: 40), LiveData(x: DateTime(2012, 10, 15, 00, 00, 01, 003), y: 50), //... ]; @override Widget build(BuildContext context) { return Container( child: SfCartesianChart( primaryXAxis: DateTimeCategoryAxis( // DateTime axis interval type is set as milliseconds. intervalType: DateTimeIntervalType.milliseconds, // Applied seconds:milliseconds format. dateFormat: DateFormat('ss:SSS') ), series: >[ ColumnSeries( dataSource: chartData, xValueMapper: (LiveData sales, _) => sales.x, yValueMapper: (LiveData sales, _) => sales.y), ], ) ); } ``` Refer to the following screenshot. ![Date-Time Category Axis with Millisecond Intervals in Flutter Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Date-Time-Category-Axis-with-Millisecond-Interval-in-Flutter-Charts.jpg) Date-Time Category Axis with Millisecond Intervals in Flutter Charts **Note:** For more information, refer to the [axis interval type demo](https://flutter.syncfusion.com/#/cartesian-charts/axis-features/interval-type) and [documentation](https://help.syncfusion.com/flutter/cartesian-charts/axis-types#date-time-intervals) . ## Floating legend You can now move the legend and place it anywhere on the top of the Flutter Chart widget. Also, the legend will not take a dedicated position. You can draw it even on top of the chart’s plot area. To achieve this, specify the value for the **[offset](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/offset.html)** property available in the [legend](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html) . Now, the legend will be moved from its original position. For example, if the [position](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) property of the [legend](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html) is set as **[LegendPosition.top](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html) ,** then the legend will be placed on the top, but in the position specified by the ** offset** property relative to the original top position. This useful feature applies to these four chart widgets: - [SfCartesianChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) - [SfCircularChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) - [SfFunnelChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) - [SfPyramidChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) The following code example shows how to place a legend in a custom position. ``` [Dart] SfCartesianChart( primaryXAxis: DateTimeAxis(), legend: Legend( isVisible: true, // Legend will be placed at the specified offset position. offset: Offset(20, 40) ), //... ) ``` Refer to the following screenshot. ![Floating Legend in Flutter Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Legend-Placed-on-Top-of-the-Flutter-Cartesian-Chart%E2%80%99s-Plot-Area.jpg) Floating Legend in Flutter Chart **Note:** For more information, refer to the [legend positioning demo](https://flutter.syncfusion.com/#/cartesian-charts/legend/legend-with-various-options) and [documentation](https://help.syncfusion.com/flutter/cartesian-charts/legend#floating-legend) . ## Controlling deselection Previously, when you tapped on a selected data point, it would be deselected. With the 2021 Volume 2 release, you can now decide whether to deselect the data point or let it remain selected by tapping it in the Flutter Charts widget. You can achieve this by setting values to the **[toggleSelection](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html)** property in **[SelectionBehavior](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior-class.html) .** If the value in the **toggleSelection** property is true, you can deselect the selected points. If the value is ** false**, then you can’t deselect the selected data points. This property defaults to ** true**. This feature works even while calling public methods, in various selection modes, with multi-selection and on dynamic changes. This feature is applicable for all four chart widgets: - [SfCartesianChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) - [SfCircularChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) - [SfFunnelChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) - [SfPyramidChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) Refer to the following code example. ``` [Dart] late SelectionBehavior _selectionBehavior; @override void initState() { _selectionBehavior = SelectionBehavior(enable: true, toggleSelection: false); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: SfCircularChart( series: >[ PieSeries( dataSource: chartData, xValueMapper: (AgeDistributionData data, _) => data.x, yValueMapper: (AgeDistributionData data, _) => data.y, selectionBehavior: _selectionBehavior ) ] ), ) ) } ``` Refer to the following .gif image. ![Toggle Selection Feature in Flutter Circular Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Toggle-Selection-Feature-in-Flutter-Circular-Chart.gif) Toggle Selection Feature in Flutter Circular Chart **Note:** For more information, refer to the [selection modes demo](https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/selection/selection-modes) and [documentation](https://help.syncfusion.com/flutter/cartesian-charts/selection#toggle-selection) . ## Overfilled radial bar chart Now, you can indicate a value that is beyond the maximum value by overfilling the radial bar chart. For example, if you set the **[maximumValue](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/maximumValue.html)** property of the **[RadialBarSeries](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries-class.html)** to 100, but the radial bar data point value is 150. Then, it will render the chart by overfilling the current data point. You don’t need any additional property to achieve this. This works by default. Refer to the following code example. ``` [Dart] final List chartData = [ StepsCountData('Low', 3500), StepsCountData('Average', 7200), StepsCountData('High', 10500), ]; SfCircularChart( series: [ RadialBarSeries( // Setting the maximum value as 6000. maximumValue: 6000, dataSource: chartData, xValueMapper: (StepsCountData data, _) => data.x, yValueMapper: (StepsCountData data, _) => data.y ) ] ) ``` Refer to the following screenshot. ![Overfilled Flutter Radial Bar Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Overfilled-Flutter-Radial-Bar-Chart.jpg) Overfilled Flutter Radial Bar Chart **Note:** For more information, refer to the [overfilled radial bar demo](https://flutter.syncfusion.com/#/circular-charts/chart-types/radial-bar/overfilled-radial-bar) and [documentation](https://help.syncfusion.com/flutter/circular-charts/chart-types/radial-bar-chart#overfilled-radial-bar) . ## Callbacks for data point interactions There may be several scenarios in an app that require performing certain actions while interacting with its data points. For this, we added three new callbacks in the Flutter charts in the 2021 Volume 2 release: - [OnPointTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointTap.html) - [onPointDoubleTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointDoubleTap.html) - [onPointLongPress](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointLongPress.html) These callbacks are called when tapping, double-tapping, and long-pressing on the data points in the chart, respectively. With these, you can get the point index, viewport point index, and series index values of the interacted data point. Also, you can get the list of data points in that series in all three callbacks. This feature is applicable for all four chart widgets: - [SfCartesianChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) - [SfCircularChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) - [SfFunnelChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) - [SfPyramidChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) The following example shows how to define and get values from the [onPointLongPress](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointLongPress.html) callback. In the same way, you can use the [OnPointTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointTap.html) and [onPointDoubleTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointDoubleTap.html) callbacks. ``` [Dart] SfCartesianChart( series: >[ ColumnSeries( dataSource: chartData, //Retrieving the long-pressed data point values. onPointLongPress: (ChartPointDetails details) { print(details.pointIndex); print(details.seriesIndex); } ) ] ) ``` **Note:** For more information, refer to the [data point events demo](https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/events/data-point-events) and [documentation](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onpointtap) . ## Retrieving all the calculated indicator values In some scenarios, we may require internally calculated technical indicator values at the application level for further processing. With the 2021 Volume 2 release, the Flutter Charts widget now allows you to get internally calculated indicator values using the **[onRenderDetailsUpdate](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/onRenderDetailsUpdate.html)** callback event in **[TechnicalIndicators](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators-class.html) .** This callback will be called while rendering an indicator. Using this callback event, you can get the indicator name and calculated data point values. Also, you can change the values of line color, width, and a dash array using this callback event. The following code example shows how to define the **[onRenderDetailsUpdate](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/onRenderDetailsUpdate.html)** indicator and how to get and set values in it. ``` [Dart] SfCartesianChart( indicators: >[ SmaIndicator( onRenderDetailsUpdate: (IndicatorRenderParams params) { // Modifying the color, width and dash array of the signal line. return ChartIndicator(Colors.cyan, 3.0, [5,5]); } ) ] ) ``` **Note:** For more information, refer to the [indicator callback documentation](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onrenderdetailsupdate-technicalindicators) . ## Breaking Changes Now, let’s see about the breaking changes in the Flutter Charts widget in the 2021 Volume 2 release. ### onPointTapped callback is deprecated The **[onPointTapped](https://pub.dev/documentation/syncfusion_flutter_charts/19.1.69/charts/SfCartesianChart/onPointTapped.html)** callback in the [SfCartesianChart](https://pub.dev/documentation/syncfusion_flutter_charts/19.1.69/charts/SfCartesianChart-class.html) has been deprecated. Instead, use the **[onPointTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointTap.html)** callback event available in the **[CartesianSeries](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries-class.html)** class to get the tapped data point details. This new callback feature is available for all four chart widgets: - [SfCartesianChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) - [SfCircularChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) - [SfFunnelChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) - [SfPyramidChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) The following code example shows how to use the [onPointTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointTap.html) callback and retrieve details with it. ``` [Dart] SfCartesianChart( series: >[ ColumnSeries( dataSource: chartData, //Retrieving the tapped data point values. onPointTap: (ChartPointDetails details) { print(details.pointIndex); print(details.seriesIndex); } ) ] ) ``` ### onIndicatorRender callback is deprecated The **[onIndicatorRender](https://pub.dev/documentation/syncfusion_flutter_charts/19.1.69/charts/SfCartesianChart/onIndicatorRender.html)** callback has been deprecated in our Flutter Charts. Instead, use the **[onRenderDetailsUpdate](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/onRenderDetailsUpdate.html)** callback in the **[TechnicalIndicators](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators-class.html)** class to get the indicator details. The Flutter Charts will call this callback while rendering an indicator. ## Conclusion I hope you now have a clear idea about the new, useful features in the Syncfusion [Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) widget for the [2021 Volume 2](https://www.syncfusion.com/forums/166800/essential-studio-2021-volume-2-main-release-v19-2-0-44-is-available-for-download) release. For more details about the bug fixes and other enhancements, check out our [release notes](https://help.syncfusion.com/flutter/release-notes/v19.2.0.44?type=all) and [What’s New](https://www.syncfusion.com/products/whatsnew/flutter) pages. Try out these new features and leave your feedback in the comments section! Also, browse through our [documentation](https://help.syncfusion.com/flutter/introduction/overview) to learn more about our Flutter widgets. You can also see Syncfusion’s Flutter app with many examples in our [GitHub repository](https://github.com/syncfusion/flutter-examples) . Don’t miss our demo app in [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en) , the [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341) , the [Windows Store](https://www.microsoft.com/en-us/p/syncfusion-flutter-gallery/9nhnbwcsf85d?activetab=pivot:overviewtab) , the [App Center](https://install.appcenter.ms/orgs/syncfusion-demos/apps/syncfusion-flutter-gallery/distribution_groups/release) , [Snapcraft,](https://snapcraft.io/syncfusion-flutter-gallery) and on our [website](https://flutter.syncfusion.com/) . If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out these features. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [feedback portal](https://www.syncfusion.com/feedback) , or [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents) . We are always happy to assist you! ## Related blogs - [Syncfusion Essential Studio® 2021 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2021-volume-2-is-here.aspx) - [What’s New in 2021 Volume 2: File-Format Libraries](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-2-file-format-libraries.aspx) - [What’s New in 2021 Volume 2: Flutter DataGrid](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-2-flutter-datagrid.aspx) - [What’s New in 2021 Volume 2: Flutter](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-2-flutter.aspx)