Waterfall Series

Waterfall series allows you to understand the cumulative effect of sequential positive or negative values. It is useful to understand the effect of a series of positive and negative values on an initial value. The series depicts color coded columns to easily distinguish positive values from negative values. Generally initial and final values are depicted by total columns, while intermediate values are represented by floating columns. It is recommended to use Waterfall series when there is a column of category text and a mix of positive and negative values. Such cases are mostly found in quantitative analysis like inventory analysis or performance analysis, where the chart shows the gradual transition in the quantitative value of an entity subjected to increment or decrement.

FlexChart provides features that can be implemented and customized for enhanced data visualization through Waterfall series.

Connector lines: Connector lines are the lines that connect color coded columns to display the flow of data in the chart. To show connector lines, set the ConnectorLines property of the WaterFall class to True.
Connector lines customization: Once displayed, connector lines can be customized using the ConnectorLineStyle property that allows you to access styling properties of the ChartStyle class.
Columns customization: To clearly differentiate positive values from negative values or total, you can apply various styles to the columns showing these values. For that, you can use various properties, such as RisingStyle, FallingStyle, TotalStyle, or StartStyle provided by the Waterfall class.

The following image displays Waterfall series displaying the cumulative effect of sequential positive and negative values.

To use the Waterfall series in FlexChart, create an instance of the Waterfall class, which inherits the Series class, and add the created instance to the FlexChart Series collection using the Series property provided by the C1FlexChart class.

The following code snippet illustrates how to set various properties while working with Waterfall series in FlexChart. The code snippet first creates a class DataCreator to generate data for the chart, and then binds the series to the data source.

Visual Basic
C#

Visual Basic

Class DataCreator
    Public Shared Function CreateData() As List(Of DataItem)
        Dim data = New List(Of DataItem)()
        data.Add(New DataItem("製品の収入", 420))
        data.Add(New DataItem("サービスの収入", -180))
        data.Add(New DataItem("固定費", 130))
        data.Add(New DataItem("変動費用", -20))
        Return data
    End Function
End Class

Public Class DataItem
    Public Sub New(costs__1 As String, amount__2 As Integer)
        Costs = costs__1
        Amount = amount__2
    End Sub

    Public Property Costs() As String
        Get
            Return m_Costs
        End Get
        Set
            m_Costs = Value
        End Set
    End Property
    Private m_Costs As String
    Public Property Amount() As Integer
        Get
            Return m_Amount
        End Get
        Set
            m_Amount = Value
        End Set
    End Property
    Private m_Amount As Integer
End Class

using System.Collections.Generic;

namespace Waterfall
{
    class DataCreator
    {
        public static List<DataItem> CreateData()
        {
            var data = new List<DataItem>();
            data.Add(new DataItem("製品の収入", 420));
            data.Add(new DataItem("サービスの収入", -180));
            data.Add(new DataItem("固定費", 130));
            data.Add(new DataItem("変動費用", -20));
            return data;
        }
    }

    public class DataItem
    {
        public DataItem(string costs, int amount)
        {
            Costs = costs;
            Amount = amount;
        }

        public string Costs { get; set; }
        public int Amount { get; set; }
    }
}

Here is the code snippet for binding the FlexChart to the data source.

XAML
Code

<Window
        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:Waterfall"
        xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="Waterfall.MainWindow"
        mc:Ignorable="d"
        DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
        Title="MainWindow" Height="528.558" Width="712.292">

        <Grid>

            <c1:C1FlexChart x:Name="flexChart" 
                            BindingX="Costs" 
                            ItemsSource="{Binding DataContext.Data}" 
                            Margin="55,161,51,28">
                <c1:C1FlexChart.Series>
                    <c1:Waterfall Binding="Amount" 
                                  ConnectorLines="True" 
                                  ShowTotal="True" 
                                  ShowIntermediateTotal="True">
                        <c1:Waterfall.StartStyle>
                            <c1:ChartStyle Fill="#7dc7ed" />
                        </c1:Waterfall.StartStyle>
                        <c1:Waterfall.FallingStyle>
                            <c1:ChartStyle Fill="#dd2714" />
                        </c1:Waterfall.FallingStyle>
                        <c1:Waterfall.RisingStyle>
                            <c1:ChartStyle Fill="#0f9d58" 
                                           Stroke="#0f9d58" />
                        </c1:Waterfall.RisingStyle>
                        <c1:Waterfall.IntermediateTotalStyle>
                            <c1:ChartStyle Fill="#7dc7ed" />
                        </c1:Waterfall.IntermediateTotalStyle>
                        <c1:Waterfall.TotalStyle>
                            <c1:ChartStyle Fill="#7dc7ed" />
                        </c1:Waterfall.TotalStyle>
                        <c1:Waterfall.ConnectorLineStyle>
                            <c1:ChartStyle Stroke="#333" 
                                           StrokeDashArray="5,5"/>
                        </c1:Waterfall.ConnectorLineStyle>
                    </c1:Waterfall>
                </c1:C1FlexChart.Series>
            <c1:C1FlexChart.AxisY>
                <c1:Axis Min="0"></c1:Axis>
            </c1:C1FlexChart.AxisY>
            </c1:C1FlexChart>

        </Grid>
</Window>

C#	Copy Code
// clear the FlexChart series collection flexChart.Series.Clear(); // create an instance of the Waterfall series C1.WPF.Chart.Waterfall waterFall = new C1.WPF.Chart.Waterfall(); // add the instance to Series collection flexChart.Series.Add(waterFall); // bind the field containing Y values for the series waterFall.Binding = "Amount"; // bind the field containing X values for the FlexChart flexChart.BindingX = "Costs"; // set the ConnectorLines property waterFall.ConnectorLines = true; // set the ShowTotal property waterFall.ShowTotal = true;

Copy Code

// clear the FlexChart series collection
flexChart.Series.Clear();

// create an instance of the Waterfall series
C1.WPF.Chart.Waterfall waterFall = new C1.WPF.Chart.Waterfall();

// add the instance to Series collection
flexChart.Series.Add(waterFall);

// bind the field containing Y values for the series
waterFall.Binding = "Amount";

// bind the field containing X values for the FlexChart
flexChart.BindingX = "Costs";

// set the ConnectorLines property
waterFall.ConnectorLines = true;

// set the ShowTotal property
waterFall.ShowTotal = true;

VB	Copy Code
' clear the FlexChart series collection flexChart.Series.Clear() ' create an instance of the Waterfall series Dim waterFall As New C1.WPF.Chart.Waterfall() ' add the instance to Series collection flexChart.Series.Add(waterFall) ' bind the field containing Y values for the series waterFall.Binding = "Amount" ' bind the field containing X values for the FlexChart flexChart.BindingX = "Costs" ' set the ConnectorLines property waterFall.ConnectorLines = True ' set the ShowTotal property waterFall.ShowTotal = True

Copy Code

' clear the FlexChart series collection
flexChart.Series.Clear()

' create an instance of the Waterfall series
Dim waterFall As New C1.WPF.Chart.Waterfall()

' add the instance to Series collection
flexChart.Series.Add(waterFall)

' bind the field containing Y values for the series
waterFall.Binding = "Amount"

' bind the field containing X values for the FlexChart
flexChart.BindingX = "Costs"

' set the ConnectorLines property
waterFall.ConnectorLines = True

' set the ShowTotal property
waterFall.ShowTotal = True