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

[Maulana Aripianto]

  @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")

                        .Minimum(0).LabelFormat("{value}%")

                        .OpposedPosition(true).Add();

                    }).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()

[Swetha Babu]

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:

@Html.EJS().Chart("DirectOvertimeSection”)

.PointRender("pointColorChange").Render()

 

<script>

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

    var pointColorChange = function (args) {

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

    }

</script>

Screenshot:

Kindly, revert us if you have any concerns.

Regards,

Swetha