Search results

Waterfall Chart

Waterfall

Waterfall chart helps to understand the cumulative effect of the sequentially introduced positive and negative values. To render a Waterfall series, use series Type as Waterfall. IntermediateSumIndexes property of waterfall is used to represent the in between sum values and SumIndexes is used to represent the cumulative sum values.

waterfall.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
  
    <ChartSeriesCollection>
        <ChartSeries DataSource="@SalesReports" XName="XValue" YName="YValue" Type="ChartSeriesType.Waterfall" IntermediateSumIndexes="@index" SumIndexes="@sumIndex">
            <ChartMarker Height="10" Width="10" Visible="true"></ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</EjsChart>

@code{
    public class ChartData
    {
        public string XValue;
        public double YValue;
    }

    public List<ChartData> SalesReports = new List<ChartData> 
    {
            new ChartData { XValue = "Income", YValue = 4711 },
            new ChartData { XValue = "Sales", YValue = -1015 },
            new ChartData { XValue = "Development", YValue = -688 },
            new ChartData { XValue = "Revenue", YValue = 1030 },
            new ChartData { XValue = "Balance" },
            new ChartData { XValue = "Expense", YValue = -361 },
            new ChartData { XValue = "Tax", YValue = -695 },
            new ChartData { XValue = "Net Profit" },
        };
    double[] index = new double[] { 4 };
    double[] sumIndex = new double[] { 8 };
}

Waterfall Chart

Customization of Waterfall Series

The negative changes of waterfall charts is represented by using NegativeFillColor and the summary changes are represented by using SummaryFillColor properties.

By default, the NegativeFillColor as ‘#E94649’ and the SummaryFillColor as ‘#4E81BC’.

custom-waterfall.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
  
    <ChartSeriesCollection>
        <ChartSeries DataSource="@ExpenseDetails" XName="XValue" SummaryFillColor="#e56590" NegativeFillColor="#f8b883"
                     YName="YValue" Type="ChartSeriesType.Waterfall" IntermediateSumIndexes="@intermediateSumIndexes" SumIndexes="@sumIndexes">
            <ChartMarker Height="10" Width="10" Visible="true"></ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</EjsChart>

@code{
    public class ChartData
    {
        public string XValue;
        public double YValue;
    }
    public List<ChartData> ExpenseDetails = new List<ChartData> 
    {
        new ChartData { XValue = "Income", YValue = 4711 },
        new ChartData { XValue = "Sales", YValue = -1015 },
        new ChartData { XValue = "Development", YValue = -688 },
        new ChartData { XValue = "Revenue", YValue = 1030 },
        new ChartData { XValue = "Balance" },
        new ChartData { XValue = "Expense", YValue = -361 },
        new ChartData { XValue = "Tax", YValue = -695 },
        new ChartData { XValue = "Net Profit" },
    };
    double[] intermediateSumIndexes = new double[] { 4 };
    double[] sumIndexes = new double[] { 7 };
}

Customization

See Also