Dynamic Threshold-Based Background Color for SAC Nume...

[#1]

Hi Experts,

I'm looking to dynamically display threshold-based background colors for a Numeric Point widget in SAC.

I know that in SAC Tables, we can easily apply background colors to cells based on thresholds. However, for the Numeric Point widget, it seems only the text color can be customized dynamically—there’s no built-in option to change the background color based on values.

Currently, I’ve placed the Numeric Point inside a Panel, and while the Panel’s background color can be set manually, it’s static and doesn’t update dynamically with the Numeric Point’s value.

Does anyone have a solution to make the Numeric Point’s background color dynamic? For example, using custom CSS or SAC scripts?

Any insights would be greatly appreciated! Thanks in advance!

SAP Analytics Cloud 

[spurwar · Accepted solution]

@Fiona_ as mentioned by @DenisT , you can try the below workaround.

Create a custom CSS for positive and negative values defining the background colour.

.positive .sap-custom-chart-widget {
    background-color: #e6f9e6 ; /* Light green background */
    border: 1px solid #d1d5db; /* Subtle border */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    opacity: 1; /* Fully visible */
}
.negative .sap-custom-chart-widget {
    background-color: #fde8e8 ; /* Light red background */
    border: 1px solid #d1d5db; /* Subtle border */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    opacity: 1; /* Fully visible */
}

use the below script for onresultchanged event of your numeric point chart to change the CSS class based on result.

// Fetch data cell from the Numeric point chart
var result = Chart_1.getDataSource().getResultSet([{"M1_GL_ACCOUNT":"[M1_GL_ACCOUNT].[parentId].&[Units Sold]"}]); // get the value of your numeric data point.

var obj = result[0];

for (var item in obj)
	{
		var test = obj[item].rawValue;
	}
//Evaluate the value and assign a CSS style

var val = ConvertUtils.stringToInteger(test);

if (val > 100000){
		Chart_1.setCssClass("positive");
	} 
else if(val < 100000){
		Chart_1.setCssClass("negative");
	}
else{
	Chart_1.setCssClass("");
}