Introducing the Waterfall Chart in Flutter | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the Waterfall Chart in Flutter

Introducing the Waterfall Chart in Flutter

As you know, we introduce new chart types in almost all our releases. The 2020 Volume 3 release was rolled out last week. If you haven’t checked it out yet, have a look here. We included the following two new chart types in the Flutter Charts widget in this release:

In this blog, I will walk you through how to create a waterfall chart and the features available in it. The box and whisker chart will be explained in an upcoming blog. In addition to these chart types, we have also implemented and included various new features in our Flutter Charts. You can find those details in this blog: What’s New in 2020 Vol 3: Flutter Charts.

Let’s explore the features of the waterfall chart!

Overview

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

Waterfall chart
Waterfall chart

This will be helpful in understanding the details of the dynamic data quickly. The data point can be either a positive or negative value.

To render a waterfall chart, create an instance of the WaterfallSeries and add it to the series collection property of SfCartesianChart. The waterfall chart takes the following values as input.

ValueTypeDescription
XInt/ Double/ String/ DateTimeX-axis value of the data point.
YInt/ DoubleY-axis value of the data point.
Intermediate sumBooleanDecides whether the data point should be an intermediate sum or not.
Total sumBooleanDecides whether the data point should be a total sum or not.

For example, consider the following code snippet.

[Dart]
ChartData(4, 5),               // Considered a normal data point.
ChartData(4, 5, true),         // Considered an intermediate sum.
ChartData(4, null, true),      // Considered an intermediate sum.
ChartData(4, 5, false, true),  // Considered a total sum.
ChartData(4, 5, true, true),   // Considered a total sum.
ChartData(4, 5, false, false), // Considered a normal data point.

Intermediate sum and total sum

The important functionality of a waterfall chart is its ability to display both intermediate and total sums:

  • Intermediate sum: Displays the total of the previous data points from its position in the chart.
  • Total sum: Displays the total of all the data points in the chart.

For example, if an intermediate sum is specified at index 4, it will add the first, second, and third data points. If another intermediate sum is specified at index 7, it will add the fifth and sixth data points. Meanwhile, the total sum will add the first, second, third, fifth, and sixth data points.

The intermediateSumPredicate and totalSumPredicate are the APIs used to identify the data points that act as intermediate and total sums, respectively. Any number of data points in the series can be intermediate or total sums.

Note: If a data point is specified as an intermediate or total sum, its y value is not considered for calculation.

Refer to the code example.

[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
    )
  ]
)
Waterfall Chart with intermediate and total sum
Waterfall Chart with intermediate and total sum

Special points color customization

For the special points, such as negative points, intermediate sums, and total sums, colors can be changed using the following built-in APIs in the waterfall chart:

If no color is specified, then those points will be rendered with the default series color.

Refer to the code example.

[Dart]
SfCartesianChart(
  series: <ChartSeries<ChartData, double>>[
    WaterfallSeries<ChartData, double>(
      negativePointsColor: const Color.fromRGBO(229, 101, 144, 1),
      intermediateSumColor: const Color.fromRGBO(79, 129, 188, 1),
      totalSumColor: const Color.fromRGBO(79, 129, 188, 1)
    )
  ]
)
Waterfall chart with customized color for special points
Waterfall chart with customized color for special points

Connector lines

Connector lines can be enabled in order to connect the data points in a waterfall chart. For positive values, the connector line is drawn to the bottom and for negative values, intermediate sums, and total sums, the connector line is drawn to the top. Connector line color, width, and dash value can be customized.

Refer to the code example.

[Dart]
SfCartesianChart(
  series: <ChartSeries<ChartData, double>>[
    WaterfallSeries<ChartData, double>(
      connectorLineSettings: WaterfallConnectorLineSettings(
        width: 2.5,
        dashArray: <double>[3, 1]
      )
    )
  ]
)
Waterfall chart with customized connector lines
Waterfall chart with customized connector lines

Other supported features

As with other chart types, all major chart features are supported: data labels, animation, multiple series, side-by-side series placement, inversed axis, transposed axis, legend, tooltip, zooming and panning, etc.

Waterfall chart with data labels
Waterfall chart with data labels
Waterfall chart with multiple series
Waterfall chart with multiple series
Vertical waterfall chart (transposed)
Vertical waterfall chart (transposed)
Waterfall chart with tooltip
Waterfall chart with tooltip
Waterfall chart with animation
Waterfall chart with animation

Helpful links

For more details about the waterfall chart type, you can refer to the following links:

Conclusion

I hope you now understand the waterfall chart and its available functionalities in the Syncfusion Flutter Charts widget. This chart type clearly shows each and every change (increment and decrement) in the data with its versatile features. We can use this chart type to show a student’s marks each semester, the revenue of a firm, pandemic details, etc. You can download this chart in our 2020 Volume 3 release.

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!

googleplay.png

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Scroll To Top