How to apply the unique color to sumIndexed values in an ASP.NET Core Waterfall Chart?

Description

This article demonstrates how to apply a unique color to sumIndexed values in a Waterfall Chart using the Syncfusion ASP.NET Core Chart component.

Solution

To set a specific fill color for the sumIndexed points in a Waterfall chart, you can use the pointRender event. By checking whether the current point index exists in the sumIndexes array, you can apply a distinct color (e.g., red) to those specific points.

Code Snippet

Below is an example of how to assign a custom color to the sumIndexed points:

<ejs-chart id="container" pointRender="pointRender">..
</ejs-chart>
function pointRender(args) {
      const currentIndex = args.point.index;
      const sumIndexes = args.series.sumIndexes;
      if (sumIndexes.includes(currentIndex)) {
       args.fill = 'red';
     }
};

Output

The following image illustrates the output of the above code.

Sample

You can download a working sample from the link below:

Download Sample – CoreWebApp1