Waterfall in ASP.NET CORE Charts Component

17 Apr 20236 minutes to read

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 the sum values and SumIndexes is used to represent the cumulative sum values.

@{
var index = new int[]{4};
var sumindex = new int[]{8};
}
<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Department"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Waterfall" intermediateSumIndexes="index"
            sumIndexes="sumindex">
        </e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<WaterfallChartData> chartData = new List<WaterfallChartData>
            {
                new WaterfallChartData { xValue = "Income", yValue = 4711 },
                new WaterfallChartData { xValue = "Sales", yValue = -1015 },
                new WaterfallChartData { xValue = "Development", yValue = -688 },
                new WaterfallChartData { xValue = "Revenue", yValue = 1030 },
                new WaterfallChartData { xValue = "Balance" },
                new WaterfallChartData { xValue = "Expense", yValue = -361 },
                new WaterfallChartData { xValue = "Tax", yValue = -695 },
                new WaterfallChartData { xValue = "Net Profit" },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class WaterfallChartData
        {
            public string xValue;
            public double yValue;
        }

Series customization

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’.

@{
var index = new int[]{4};
var sumindex = new int[]{8};
}
<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Department"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Waterfall" intermediateSumIndexes="index" sumIndexes="sumindex"
            summaryFillColor="#e56590" negativeFillColor="#f8b883">
        </e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<WaterfallChartData> chartData = new List<WaterfallChartData>
            {
                new WaterfallChartData { xValue = "Income", yValue = 4711 },
                new WaterfallChartData { xValue = "Sales", yValue = -1015 },
                new WaterfallChartData { xValue = "Development", yValue = -688 },
                new WaterfallChartData { xValue = "Revenue", yValue = 1030 },
                new WaterfallChartData { xValue = "Balance" },
                new WaterfallChartData { xValue = "Expense", yValue = -361 },
                new WaterfallChartData { xValue = "Tax", yValue = -695 },
                new WaterfallChartData { xValue = "Net Profit" },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class WaterfallChartData
        {
            public string xValue;
            public double yValue;
        }

See Also