We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


Overview

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

Beautiful WPF waterfall chart


Key features

Waterfall chart with AutoSum

AutoSum

Calculate the sum of previous data points in the waterfall chart. If this property is disabled, use the specified ItemsSource collection’s y-value.

Color customization in a waterfall chart

UI styling

Customize the positive, negative, and summary segment colors of the waterfall chart by using the built-in APIs to make it visually unique.

Data labels of waterfall chart

Data labels

Data labels display information about the data points. It provides the support for customizing the foreground, border, and background in addition to template support to customize the default appearance with the desired view. You can rotate a data label by its given angle.


Code example

<Window x:Class="ChartExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ChartExample"
        xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
        mc:Ignorable="d"
        Title="WPF Waterfall Chart" Height="450" Width="700">
    
    <!--Setting DataContext-->
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    
    <StackPanel>
        <chart:SfChart Height="300" Width="500">
            <!--Initialize the horizontal axis for the WPF Chart-->
            <chart:SfChart.PrimaryAxis>
                <chart:CategoryAxis />
            </chart:SfChart.PrimaryAxis>

            <!--Initialize the vertical axis for the WPF Chart-->
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis />
            </chart:SfChart.SecondaryAxis>
             <!--Adding Waterfall Series to the WPF Chart-->
            <chart:WaterfallSeries
                ItemsSource="{Binding RevenueDetails}"
                NegativeSegmentBrush="#F14C72"
                SummaryBindingPath="IsSummary"
                SummarySegmentBrush="#8C8C8C"
                XBindingPath="Category"
                YBindingPath="Value">
            </chart:WaterfallSeries>

        </chart:SfChart>
    </StackPanel>
</Window>
public class WaterfallModel
    {
        public double Value { get; set; }

        public string Category { get; set; }

        public bool IsSummary { get; set; }
    }
    public class ViewModel
    {
        public ViewModel()
        {
            this.RevenueDetails = new ObservableCollection<WaterfallModel>();

            RevenueDetails.Add(new WaterfallModel() { Category = "Sales", Value = 165 });
            RevenueDetails.Add(new WaterfallModel() { Category = "Staff", Value = -47 });
            RevenueDetails.Add(new WaterfallModel() { Category = "Balance", Value = -58, IsSummary = true });
            RevenueDetails.Add(new WaterfallModel() { Category = "Others", Value = 15 });
            RevenueDetails.Add(new WaterfallModel() { Category = "Tax", Value = -20 });
            RevenueDetails.Add(new WaterfallModel() { Category = " Net Income", Value = 25, IsSummary = true });
        }

        public ObservableCollection<WaterfallModel> RevenueDetails { get; set; }
     
    }

Learning resources

Navigate to GitHub code used to configure the WPF waterfall chart

GitHub code

The WPF waterfall chart configuration code is available in GitHub.

Navigate to the options available in the user guide to customize the WPF waterfall chart

Waterfall Chart User Guide

Learn more about the available options to customize WPF waterfall charts.

Navigate to the API references documentation of the WPF waterfall chart

Waterfall Chart API reference

Explore the WPF waterfall chart APIs.


100+ WPF CONTROLS

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon