Waterfall using asp.net chart control

Designing a waterfall chart using asp.net charting control is a bit trick as it doesn’t support Waterfall series type. But we can do it by using RangeColumn series type and bit of code.

Step 1:
Drop a asp.net chart control on page with having a series of RangeColumn type.

Step 2 :

Next step is to add data points to your chart and make it to look like waterfall chart. RangeColumn series type provides a way to add your Y-Axis value in a range, you can specify your starting and ending values for a data point like this:

Adding a first point

cWaterfall.Series[0].Points.AddXY("First Item", new object[] { 0, 500 });
cWaterfall.Series[0].Points[0].Label = "500"
cWaterfall.Series[0].Points[0].Color = Color.SkyBlue;

Adding a second point

cWaterfall.Series[0].Points.AddXY("Second Item", new object[] { 500, 700 });
cWaterfall.Series[0].Points[1].Label = "200"
cWaterfall.Series[0].Points[1].Color = Color.Green;

By using the above approach you can create a waterfall chart like this

Advertisement