Chart of the Week: Creating a .NET MAUI Waterfall Chart to Track Monthly Sales
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (206)Angular  (109)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (213)BoldSign  (13)DocIO  (24)Essential JS 2  (107)Essential Studio  (200)File Formats  (66)Flutter  (132)JavaScript  (220)Microsoft  (118)PDF  (81)Python  (1)React  (100)Streamlit  (1)Succinctly series  (131)Syncfusion  (909)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (158)Xamarin  (161)XlsIO  (36)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (147)Chart  (130)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (623)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (40)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  (504)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)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  (386)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (587)What's new  (328)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Chart of the Week: Creating a .NET MAUI Waterfall Chart to Track Monthly Sales

Chart of the Week: Creating a .NET MAUI Waterfall Chart to Track Monthly Sales

Welcome to our Chart of the Week blog series.

This blog will use the Syncfusion .NET MAUI waterfall chart to track monthly sales data. Waterfall charts are useful for plotting the cumulative effect of a set of provided positive and negative values. The waterfall series is represented by rectangles and a connector between them.

The following waterfall chart shows the monthly sales for a year, depicting the funds gained or lost each month.Visualizing monthly sales data using .NET MAUI Waterfall Chart

Let’s start creating a graph of net cash flow using the Syncfusion .NET MAUI waterfall chart.

Step 1: Gathering data

To create a waterfall chart, first, we need to gather the data. Here, we are going to use randomly generated data. Waterfall charts can be used to analyze and compare the cash flows of various business aspects, such as entire companies, marketing campaigns, and individual stores.

Step 2: Populate data for the chart

Let’s define the NetCashFlowModel class. This class will store the month, fund, and summary details of the sales using the Month, Fund, and IsSum properties.

Refer to the following code example.

public class NetCashFlowModel
{
    public string Month { get; set; }
    public double Fund { get; set; }
    private bool isSum = false;
    public bool IsSum
    {
        get {return isSum;}
        set {isSum = value;}
    }
}

Then, generate the data collection for net cash flow using the NetCashFlow class.

Public class NetCashFlow
{
    public NetCashFlow()
    {
        Data = new List<NetCashFlowModel>();
        Data.Add(new NetCashFlowModel() { Month = “Jan”, Fund = 2500 });
        Data.Add(new NetCashFlowModel() { Month = “Feb”, Fund = 2250 });
        Data.Add(new NetCashFlowModel() { Month = “Mar”, Fund = -1000 });
        Data.Add(new NetCashFlowModel() { Month = “Apr”, Fund = 2300 });
        Data.Add(new NetCashFlowModel() { Month = “May”, Fund = 700 });
        Data.Add(new NetCashFlowModel() { Month = “Jun”, Fund = -1500 });
        Data.Add(new NetCashFlowModel() { Month = “Jul”, Fund = -800 });
        Data.Add(new NetCashFlowModel() { Month = “Aug”, Fund = -600 });
        Data.Add(new NetCashFlowModel() { Month = “Sep”, Fund = -900 });
        Data.Add(new NetCashFlowModel() { Month = “Oct”, Fund = 2250 });
        Data.Add(new NetCashFlowModel() { Month = “Nov”, Fund = 1200 });
        Data.Add(new NetCashFlowModel() { Month = “Dec”, Fund = -3000 });
        Data.Add(new NetCashFlowModel() { Month = “Total”, IsSum=true });
    }
    public List<NetCashFlowModel> Data { get; set; }
}

Step 3: Configure Syncfusion .NET MAUI Charts

Now, configure the Syncfusion .NET MAUI Charts control by referring to this documentation.

Refer to the following code example.

<Chart:SfCartesianChart x:Name=”chart”>
 <Chart:SfCartesianChart.Xaxes>
  <Chart:CategoryAxis>
  </Chart:CategoryAxis>
 </Chart:SfCartesianChart.Xaxes>
 <Chart:SfCartesianChart.Yaxes>
  <Chart:NumericalAxis>
  </Chart:NumericalAxis>
 </Chart:SfCartesianChart.Yaxes>
</Chart:SfCartesianChart>

Step 4: Binding data to the waterfall chart

To bind net cash flow data to our chart, we‘ll use the Syncfusion WaterfallSeries class.

Refer to the following code example.

<Chart:WaterfallSeries XBindingPath="Month" YBindingPath="Fund" SummaryBindingPath="IsSum" ItemsSource="{Binding Data}">
</Chart:WaterfallSeries>

In the previous code example, we’ve bound the ItemsSource property with a collection of net cash flow data from the NetCashFlow class. The XBindingPath and YBindingPath are bound with the Month and Fund properties which indicate the data points that need to be used for the x- and y-axes, respectively. SummaryBindingPath provides the summary values of the series based on its associated property’s (IsSum) Boolean flag value.

Step 5: Customizing the chart appearance

We can enhance the appearance of our waterfall chart by customizing various elements, such as the appearance of axis elements, series, and titles.

Let’s add a title to the chart to provide a quick overview of the plotted data. Refer to the following code example.

<Chart:SfCartesianChart.Title>
 <Label Text="Net Cash Flow" HorizontalTextAlignment="Center" TextColor="#FF455E7A" FontSize="Title" FontAttributes="Bold"/>
</Chart:SfCartesianChart.Title>

Then, customize the appearance of the axis elements using the following code example.

<Chart:SfCartesianChart.XAxes>
 <Chart:CategoryAxis ShowMajorGridLines="False">
  <Chart:CategoryAxis.MajorTickStyle>
   <Chart:ChartAxisTickStyle StrokeWidth="0"/>
  </Chart:CategoryAxis.MajorTickStyle>
  <Chart:CategoryAxis.LabelStyle>
   <Chart:ChartAxisLabelStyle FontSize="15"/>
  </Chart:CategoryAxis.LabelStyle>
 </Chart:CategoryAxis>
</Chart:SfCartesianChart.XAxes>
<Chart:SfCartesianChart.YAxes>
 <Chart:NumericalAxis IsVisible="False"
                      Maximum="8000"
                      ShowMajorGridLines="False"/>
</Chart:SfCartesianChart.YAxes>

We can modify the appearance of the waterfall series by customizing the color of the segments and by enabling connector lines and data labels for the series. We can customize the segment color based on its functionality using the NegativePointsBrush and SummaryPointsBrush properties. The NegativePointsBrush is used to fill the negative segments of the series, while the SummaryPointsBrush is used to fill the summary segments of the series.

<Chart:WaterfallSeries NegativePointsBrush="#FFFE1A67" Fill="#FF4CC0C0" SummaryPointsBrush="#FFA9CF41"/>

To add connector lines and data labels in the chart, use the ShowConnectorLine and ShowDataLabels properties. Refer to the following code example.

<Chart:WaterfallSeries ShowDataLabels="True" ShowConnectorLine="True">
 <Chart:WaterfallSeries.ConnectorLineStyle>
  <Chart:ChartLineStyle StrokeDashArray="1,1" StrokeWidth="1" Stroke="black"/>
 </Chart:WaterfallSeries.ConnectorLineStyle>
 <Chart:WaterfallSeries.DataLabelSettings>
  <Chart:CartesianDataLabelSettings LabelPlacement="Outer" UseSeriesPalette="False">
   <Chart:CartesianDataLabelSettings.LabelStyle>
    <Chart:ChartDataLabelStyle LabelFormat="$#,##"/>
   </Chart:CartesianDataLabelSettings.LabelStyle>
  </Chart:CartesianDataLabelSettings>
 </Chart:WaterfallSeries.DataLabelSettings>
</Chart:WaterfallSeries>

After executing the previous code examples, we’ll output an image similar to the following image.

Visualizing Monthly Sales Data Using Syncfusion .NET MAUI Waterfall Chart
Visualizing Monthly Sales Data Using Syncfusion .NET MAUI Waterfall Chart

GitHub reference

For more information, refer to the Creating a Waterfall Chart to Track Monthly Sales project on GitHub.

Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize monthly sales data using the Syncfusion .NET MAUI waterfall chart. This helps us visualize trends and changes in net cash flow over a period. We encourage you to follow the steps provided in this blog and share your thoughts in the comments below.

You can also contact us via our support forum, support portal, or feedback portal. We are always happy to assist you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed