Dynamic Threshold-Based Background Color for SAC Numeric Point

[Fiona_]

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("");
}

[DenisT]

Hi @Fiona_,

we usually solve this issue by not changing the overall background color, since this is quite slow as it will include an OnResultChanged coding which not only needs to read the current value but also changes the CSS style of the numeric point. The slow part here is the coding for getting the current value (usually results in https request to the backend).

We therefore add one or more variances to the KPI like shown below:

So although the background is not red, it´s already really quick to anticipate, if the KPI is "good" or "bad".

If you really need to change the background color, the steps with OnResultChanged are:

1. Get the (new) value currently visible
2. Compare that value with you good/bad/neutral/... threshold
3. Based on the threshold, set the CSS Style using setCssClass

Upfront you oviously need to define different CSS classes for good/bad/neutral/...

Best regards,
Denis

[N1kh1l]

@Fiona_ 

May be you could explore using CSS in scripting.  You can use setcssclass method with an IF condition checking your threshold criteria.

https://help.sap.com/doc/1639cb9ccaa54b2592224df577abe822/release/en-US/index.html#Widget_MsetCssCla...

https://help.sap.com/docs/SAP_ANALYTICS_CLOUD/00f68c2e08b941f081002fd3691d86a7/6d5e482fa76246fab1c53...

Hope this helps !!

Nikhil