Waterfall in ASP.NET CORE Charts Component
8 Oct 202424 minutes to read
Waterfall
To render a waterfall
series in your chart, you need to follow a few steps to configure it correctly. Here’s a concise guide on how to do this:
-
Set the series type: Define the series
type
as Waterfall in your chart configuration. This indicates that the data should be represented as a waterfall chart, which helps illustrate the cumulative effect of sequentially introduced positive and negative values. -
Configure intermediate and cumulative sums: Use the
intermediateSumIndexes
property to represent intermediate sum values, and thesumIndexes
property to represent 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;
}
Binding data with series
You can bind data to the chart using the dataSource
property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series xName
and yName
properties.
@{
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
In waterfall charts, you can customize the appearance of different types of data changes using specific properties. The negativeFillColor
property is used to specify the color for negative changes, which helps visually distinguish decreases in the data. Similarly, the summaryFillColor
property is used to define the color for summary changes. By default, the negativeFillColor
is set to green, indicating decreases, while the summaryFillColor
is set to black, marking summary or total 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"
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;
}
Empty points
Data points with null or undefined values are considered empty. Empty data points are ignored and not plotted on the chart.
Mode
Use the mode
property to define how empty or missing data points are handled in the series. The default mode for empty points is Gap.
@{
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-emptypointSettings mode="Average"></e-series-emptypointSettings>
</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 = null },
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;
}
Fill
Use the fill
property to customize the fill color of empty points in the series.
@{
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-emptypointSettings mode="Average" fill="red"></e-series-emptypointSettings>
</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 = null },
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;
}
Border
Use the border
property to customize the width and color of the border for empty points.
@{
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-emptypointSettings mode="Average">
<e-series-emptypointSettings-border width="2" color="green"></e-series-emptypointSettings-border>
</e-series-emptypointSettings>
</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 = null },
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;
}
Events
Series render
The seriesRender
event allows you to customize series properties, such as data, fill, and name, before they are rendered on the chart.
@{
var index = new int[]{4};
var sumindex = new int[]{8};
}
<ejs-chart id="container" seriesRender="changeColor">
<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>
<script>
function changeColor(args) {
args.fill = '#ff6347';
args.series.negativeFillColor = '#ff6347';
args.series.summaryFillColor = '#ff6347';
}
</script>
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;
}
Point render
The pointRender
event allows you to customize each data point before it is rendered on the chart.
@{
var index = new int[]{4};
var sumindex = new int[]{8};
}
<ejs-chart id="container" pointRender="changeColor">
<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>
<script>
function changeColor(args) {
if (args.point.index % 2 !== 0) {
args.fill = '#ff6347';
}
else {
args.fill = '#009cb8';
}
}
</script>
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;
}