We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

how to change the color of the waterfall chart? if MMA and Actual diagram are gray, positive color is red while negative color is blue

  @Html.EJS().Chart("DirectOvertimeSection").Series(series =>


            series.Width(2).XName("xValue").YName("yValue").Marker(mr => mr.DataLabel(dl => dl.Visible(true).Font(ff => ff.FontWeight("600").Color("#252323")).Position(Syncfusion.EJ2.Charts.LabelPosition.Outer))).SumIndexes(ViewBag.sumIndexes).NegativeFillColor("#1988F6").ColumnWidth(0.9).Type(Syncfusion.EJ2.Charts.ChartSeriesType.Waterfall).DataSource(ViewBag.dataSource).Add();

        }).ChartArea(area => area.Border(br => br.Width(0.1))).Width("100%").Height("38%").Axes(axis =>


                        axis.Name("Secondary Axis")



                    }).PrimaryXAxis(py => py.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(0)).PlotOffset(20)).PrimaryYAxis(py => py.Minimum(0).Interval(5).MajorGridLines(mg => mg.Width(0))).LegendSettings(lg => lg.Visible(true)).Tooltip(tl => tl.Enable(true)).TextRender("textRender").AxisLabelRender("axisLabelRender").Render()

1 Reply

SB Swetha Babu Syncfusion Team December 16, 2022 09:16 AM UTC

Hi Maulana,

Greetings from Syncfusion.

We can change the color of each bar in the waterfall by using the fill argument in the PointRender event of the chart. We have created a simple MVC application to demonstrate the same and it can be downloaded from the below link.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Waterfall-1867370707

Code Snippet:





    var pointColors = ["red", "yellow", "Orange", "blue", "green", "aqua", "violet", "grey"];

    var pointColorChange = function (args) {

        args.fill = pointColors[args.point.index % 10];




Kindly, revert us if you have any concerns.



Live Chat Icon For mobile
Up arrow icon