Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (24)Angular  (42)ASP.NET  (48)ASP.NET Core  (57)ASP.NET MVC  (84)Azure  (28)Blazor  (74)DocIO  (18)Essential JS 2  (67)Essential Studio  (161)Flutter  (85)JavaScript  (141)Microsoft  (101)PDF  (54)React  (32)Succinctly series  (120)Syncfusion  (459)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (18)Windows Forms  (54)WPF  (108)Xamarin  (119)XlsIO  (22)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (104)Chart  (45)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (36)Development  (245)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (16)Extensions  (11)File Manager  (3)Gantt  (8)Gauge  (6)Git  (3)Grid  (25)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (188)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (19)Performance  (3)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (20)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (14)Solution Services  (2)Spreadsheet  (5)SQL  (5)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (44)UI  (106)Uncategorized  (68)Unix  (2)User interface  (67)Visual State Manager  (1)Visual Studio  (17)Visual Studio Code  (9)Web  (163)What's new  (108)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
What’s New in 2021 Volume 1: Flutter Charts

What’s New in 2021 Volume 1: Flutter Charts

The Syncfusion Flutter Charts widget includes functionality for plotting more than 30 chart types. Each chart is easily configured with built-in support for creating stunning visual effects. In this blog post, I’ll quickly introduce the new features included in the Flutter Charts widget for the 2021 Volume 1 release.

Let’s see them!

New features in Cartesian charts

First, let’s see about the new vivid features in the Flutter Cartesian Charts (line, bar, column and area) in this release:

Date-time category axis

The date-time category axis is a combination of both DateTimeAxis and CategoryAxis.  With this, you can easily display the date-time values with non-linear intervals.

For example, you can visualize the daily working hours of an employee in a month by excluding the holidays. This helps render the chart without any gaps in the data points.

The following example shows how to sequentially render data-time values that have unequal intervals using the Flutter Charts widget.

[Dart]
SfCartesianChart(
  primaryXAxis: DateTimeCategoryAxis(
    //...
  ),
  series: <ColumnSeries<_ChartData, DateTime>>[
    ColumnSeries<_ChartData, DateTime>(
      dataSource: <_ChartData>[
        _ChartData(DateTime(2020,12,2,21,00), 30),
        _ChartData(DateTime(2020,12,5,12,16), 13),
        _ChartData(DateTime(2020,12,12,21,00), 24)
      ],
      xValueMapper: (_ChartData data, _) => data.x,
      yValueMapper: (_ChartData data, _) => data.y,                
    ),
  ],
)
Flutter Cartesian Chart with Date-Time Category in X-axis
Flutter Cartesian Chart with Date-Time Category in X-axis

Note: For more information, refer to the date-time category axis demo and documentation.

On-demand loading

This feature allows you to load a certain amount of data initially and then load more data lazily in a chart. When the horizontal scrolling reaches the start or end position in a chart, then the loadMoreIndicatorBuilder will be called. Using this, you can easily display any widget on the chart to represent loading of more data.

The following example shows how to enable infinite scrolling and display a circular progress indicator while loading more data.

[Dart]
@override
Widget build(BuildContext context) {
  return Container(
    child: SfCartesianChart(
      loadMoreIndicatorBuilder: 
        (BuildContext context, ChartSwipeDirection direction) => buildLoadMoreView(context, direction),
      series: <AreaSeries<_ChartData, num>>[
        AreaSeries<_ChartData, num>(
          dataSource: chartData,
          xValueMapper: (_ChartData data, _) => data.x,
          yValueMapper: (_ChartData data, _) => data.y, 
        ),
      ],
    )
  );
}

Widget buildLoadMoreView(BuildContext context, ChartSwipeDirection direction) {
  if (direction == ChartSwipeDirection.end) {
    return FutureBuilder<String>(
      future: _updateData(), /// Adding additional data using updateDataSource method
      builder: (BuildContext futureContext, AsyncSnapshot<String> snapShot) {
        return snapShot.connectionState != ConnectionState.done ?
         const CircularProgressIndicator(): SizedBox.fromSize(size: Size.zero);
      },
    );
  } else {
    return SizedBox.fromSize(size: Size.zero);
  }
}
Flutter Cartesian Chart with Infinite Scrolling Functionality
Flutter Cartesian Chart with Infinite Scrolling Functionality

Note: For more information, refer to the infinite scrolling demo and documentation.

Auto-scrolling

This feature helps you display a fixed number of data points in the charts and view the remaining data points by scrolling using the autoScrollingDelta property in the chart axis. It always shows the recently added data points. Scrolling will be reset to the start or end of the range based on the autoScrollingMode property’s value, whenever a new point is added dynamically. Also, in the DateTimeAxis, you can set an autoscrolling delta interval type by using the AutoScrollingDeltaType property, like in the following code example.

[Dart]
SfCartesianChart(
  primaryXAxis: DateTimeAxis(
    dateFormat: DateFormat.Hms(),
    intervalType: DateTimeIntervalType.seconds,
    autoScrollingDelta: 5,
    autoScrollingDeltaType: DateTimeIntervalType.seconds
  )
)
Flutter Cartesian Chart with Autoscrolling Functionality
Flutter Cartesian Chart with Autoscrolling Functionality

Note: For more information, refer to the autoscrolling demo and documentation.

Marker in trackball tooltip

Like a series tooltip, markers in a trackball tooltip can be displayed using the canShowMarker property. You can render the Markers with the series color and place them near the value in the trackball tooltip. This helps us to easily convey which value belongs to which series.

Refer to the following code example.

[Dart]
late TrackballBehavior _trackballBehavior;

@override
void initState() {
  _trackballBehavior = TrackballBehavior(
    enable: true,
    tooltipSettings: InteractiveTooltip(
      canShowMarker: true
    )
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
  return SfCartesianChart(
    //...
    trackballBehavior: _trackballBehavior,
  );
}
Trackball Tooltip with Markers in Flutter Cartesian Chart
Trackball Tooltip with Markers in Flutter Cartesian Chart

Note: For more information, refer to the trackball tooltip with marker demo  and  documentation.

Swiping gesture callback

On swiping over the chart plot area, the onPlotAreaSwipe callback will be called. This provides options to get the direction of the swipe. If the chart is swiped from left to right, the direction is ChartSwipeDirection.start. If the swipe happens from right to left, the direction is ChartSwipeDirection.end.

The following example demonstrates the swiping functionality achieved using the onPlotAreaSwipe callback. In this callback, you can change the visibleMinimum and visibleMaximum values to display the next set of data in the chart.

[Dart]
SfCartesianChart(
  onPlotAreaSwipe: (direction) => performSwipe(direction),
)


void performSwipe(ChartSwipeDirection direction) {
//...
}
Flutter Cartesian Chart With Swiping Functionality
Flutter Cartesian Chart with Swiping Functionality

Note: For more information, refer to the pagination demo  and documentation.

New features in Circular charts

Lets’ see about the new features in the Flutter Circular chart types (pie, doughnut, and radial bar) in the 2021 Volume 1 release:

Shader fill

You can fill the circular charts with attracting gradients or images by considering all the data points as a single segment. The onCreateShader callback will be called while rendering the circular chart, and you can return shaders in it. You can also fill the data points of pie, doughnut and radial bar charts with any type of gradient (such as linear, sweep and radial) or imageShader.

[Dart]
List<Color> colors = const <Color>[
  Color.fromRGBO(96, 87, 234, 1),
  Color.fromRGBO(59, 141, 236, 1),
  Color.fromRGBO(112, 198, 129, 1),
  Color.fromRGBO(237, 241, 81, 1)
];

List<double> stops = <double>[0.25, 0.5, 0.75, 1];

SfCircularChart(
  onCreateShader: (ChartShaderDetails chartShaderDetails) {
    return Gradient.linear(chartShaderDetails.outerRect.topRight, chartShaderDetails.outerRect.centerLeft, colors, stops); 
  },
)
Types of Gradient Support in Flutter Pie Chart
Types of Gradient Support in Flutter Pie Chart

Note: For more information, refer to the gradient fill demo and  documentation.

Mapping shaders for data points

You can also fill different shader for each individual data point in a Chart. The pointShaderMapper property allows you to map the shader field from the chart data source. You can map different gradient types and imageShader for individual data points using this mapper callback.

The following example shows how to map different image shaders to individual data points in the Flutter pie chart.

[Dart]
SfCircularChart(
  series: <PieSeries<_ChartShaderData, String>>[
    PieSeries<_ChartShaderData, String>(
      dataSource: <_ChartShaderData>[
        _ChartShaderData(
          'Apple',
          25,
          // actualImage is of type ui.Image and it is a physical image from assets folder
          ui.ImageShader(actualImage!, TileMode.repeated, TileMode.repeated, Matrix4.identity().scaled(0.5).storage),
        ),
        // ...              
      ],
      pointShaderMapper: (_ChartShaderData data, _, Color color, Rect rect) => data.shader,
    ),
  ],
)
      
class _ChartShaderData {
  _ChartShaderData(this.x, this.y, this.text, this.shader);
  final String x;
  final num y;
  final Shader shader;
}
Mapping Different Shaders for Data Points in Flutter Pie Chart
Mapping Different Shaders for Data Points in Flutter Pie Chart

Note: For more information, refer to the image fill demo and Shader mapping for data points documentation.

Point render mode

The data points in the Flutter pie and doughnut charts can be filled either with solid colors or with sweep gradients by setting the mode value for the pointRenderMode property.

  • If PointRenderMode.segment is specified, the data points will be filled with solid colors from the palette or with the colors mentioned in the pointColorMapper property.
  • If PointRenderMode.gradient is specified, then a sweep gradient will be formed with solid colors, and it will fill the data points.
[Dart]
SfCircularChart(
  series: <CircularSeries<_SalesData, String>>[
    PieSeries<_SalesData, String>(
      dataSource: chartData,
      xValueMapper: (_SalesData sales, _) => sales.x,
      yValueMapper: (_SalesData sales, _) => sales.y,
      pointRenderMode: PointRenderMode.gradient,
    )
  ]
)
Flutter Pie Chart with Solid and Gradient Colors
Flutter Pie Chart with Solid and Gradient Colors

Note: For more information, refer to the pointer render mode demo and documentation.

Other noteworthy updates

Additional enhancement

The Flutter Charts now provide support to change the trackball or crosshair position even after a touch interaction leaves the chart area.

Flutter 2.0

  • The Flutter charts package is now Flutter 2.0 compatible and supports null-safety.
  • All the widgets in Flutter Charts packages are compatible with Windows, macOS, and Linux .

Breaking changes

  • The onAxisLabelRender callback has been deprecated; instead, you can use the axisLabelFormatter callback to customize the axis labels.
  • Hereafter initialize the chart behaviors in the initState method instead of the build method.
  • Now, the trackball tooltip will display the marker by default.

Conclusion

I hope you now have a clear idea about the new, useful features available in the Syncfusion Flutter Charts widget for the 2021 Volume 1 release. For more details about the bug fixes and other enhancements, check out our release notes and What’s New pages.

Browse thorugh our documentation to learn more about our Flutter widgets. You can also see Syncfusion’s Flutter app with many examples in this GitHub repository. Don’t miss our demo app for the web, or in Google Play, App Store, Microsoft Store and in Snapcraft.

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 forumfeedback portal, or Direct-Trac support system. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top