The following example for your reference.
1.Create a custom list, add number fields "Plan" and "Actual".
2.Add some data to the list.
If use the Classic UI, we can add the following code into a script editor web part in list view to achieve it.
<script type="text/javascript"> (function () { // Create object that have the context information about the field that we want to change it's output render var fieldContext = {}; fieldContext.Templates = {}; fieldContext.Templates.Fields = { // Apply the new rendering for Priority field on List View "Actual": { "View": fieldTemplate } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext); })(); // This function provides the rendering logic for list view function fieldTemplate(ctx) { var plan = ctx.CurrentItem.Plan; var actual = ctx.CurrentItem.Actual; // Return html element with appropriate color based on priority value if(actual>=plan){ return "<span style='color : green'>" + actual + "</span>"; }else { return "<span style='color : red'>" + actual + "</span>"; } } </script>
If use the Modern UI, we need use column formatting to achieve it.
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", "elmType": "div", "debugMode": true, "txtContent": "@currentField", "style": { "color": "=if(@currentField>=[$Plan], 'green', 'red'", "padding-top":"11px" } }
