1 Solution
@jip31 since you do not have access for installing custom visualization apps, I would expect you can't use JavaScript static file as well, otherwise one of the options would be to use Simple XML JS extension to color Single Value based on values using JavaScript: https://answers.splunk.com/answers/583539/can-we-set-two-different-colors-for-single-value-a.html
You can also check out Custom Decorations example in the Splunk Dashboard Examples App which also uses Simple XML CSS Extension in <html> panel, where CSS changes can be brought inside Simple XML Dashboard.
Following is a list of 4 other options to Color Single Value, with their advantage/disadvantage. See whichever fits best (hopefully on of CSS overrides ;)):
Following is the complete Simple XML code:
<dashboard>
<label>Single Value Color By Rangemap</label>
<row>
<panel>
<title>Option 1: Single Value Color with rangemap (caution while editing as rangemap can get overridden)</title>
<single>
<search>
<query>| makeresults
| eval state="GOOD"
| table state
| eval severity=case(state="GOOD", 0, state="BAD", 1)
| rangemap field=severity low=0-0 default=severe</query>
<earliest>-15m</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="colorBy">value</option>
<option name="colorMode">none</option>
<option name="drilldown">none</option>
<option name="numberPrecision">0</option>
<option name="showSparkline">1</option>
<option name="showTrendIndicator">1</option>
<option name="unitPosition">after</option>
<option name="useColors">0</option>
</single>
<single>
<search>
<query>| makeresults
| eval state="BAD"
| table state
| eval severity=case(state="GOOD", 0, state="BAD", 1)
| rangemap field=severity low=0-0 default=severe</query>
<earliest>-15m</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="colorBy">value</option>
<option name="colorMode">none</option>
<option name="drilldown">none</option>
<option name="numberPrecision">0</option>
<option name="showSparkline">1</option>
<option name="showTrendIndicator">1</option>
<option name="unitPosition">after</option>
<option name="useColors">0</option>
</single>
<html>
<div>
<a href="https://docs.splunk.com/Documentation/Splunk/latest/Viz/SingleValueFormatting#Migration_for_rangemap_settings_in_existing_single_value_visualizations">Single Value rangemap migration.</a>
</div>
</html>
</panel>
</row>
<row>
<panel>
<title>Option 2: Deprecated classField option</title>
<single>
<search>
<query>| makeresults
| eval state="GOOD"
| table state
| eval severity=case(state="GOOD", 0, state="BAD", 1)
| rangemap field=severity low=0-0 default=severe</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="useColors">0</option>
<option name="useThousandSeparators">1</option>
<option name="classField">severity</option>
<option name="field">state</option>
</single>
<single>
<search>
<query>| makeresults
| eval state="BAD"
| table state
| eval severity=case(state="GOOD", 0, state="BAD", 1)
| rangemap field=severity low=0-0 default=severe</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="useColors">0</option>
<option name="useThousandSeparators">1</option>
<option name="classField">severity</option>
<option name="field">state</option>
</single>
<html>
<div>
<a href="https://docs.splunk.com/Documentation/Splunk/latest/Viz/PanelreferenceforSimplifiedXML#single_value">Single Value Simple XML Configuration</a>
</div>
</html>
</panel>
</row>
<row>
<panel>
<title>Option 3: Token for Single Value Block color using CSS Override</title>
<html depends="$alwaysHideCSSStylePanel$">
<style>
#singleWithCSSOverride1 svg.svg-container rect{
fill: $tokColor1$ !important;
}
#singleWithCSSOverride2 svg.svg-container rect{
fill: $tokColor2$ !important;
}
</style>
</html>
<single id="singleWithCSSOverride1">
<search>
<query>| makeresults
| eval state="GOOD"
| table state</query>
<earliest>-15m</earliest>
<latest>now</latest>
<done>
<eval token="tokColor1">case($result.state$=="GOOD","#53a051",true(),"#dc4e41")</eval>
</done>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="rangeColors">["0x555","0x555"]</option>
<option name="rangeValues">[0]</option>
<option name="useColors">1</option>
</single>
<single id="singleWithCSSOverride2">
<search>
<query>| makeresults
| eval state="BAD"
| table state</query>
<earliest>-15m</earliest>
<latest>now</latest>
<done>
<eval token="tokColor2">case($result.state$=="GOOD","#53a051",true(),"#dc4e41")</eval>
</done>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="rangeColors">["0x555","0x555"]</option>
<option name="rangeValues">[0]</option>
<option name="useColors">1</option>
</single>
</panel>
</row>
<row>
<panel>
<title>Option 4: Token for Single Value Text color using CSS Override</title>
<html depends="$alwaysHideCSSStylePanel$">
<style>
#singleWithCSSOverride3 svg.svg-container text.single-result{
fill: $tokColor1$ !important;
}
#singleWithCSSOverride4 svg.svg-container text.single-result{
fill: $tokColor2$ !important;
}
</style>
</html>
<single id="singleWithCSSOverride3">
<search>
<query>| makeresults
| eval state="GOOD"
| table state</query>
<earliest>-15m</earliest>
<latest>now</latest>
<done>
<eval token="tokColor1">case($result.state$=="GOOD","#53a051",true(),"#dc4e41")</eval>
</done>
</search>
<option name="colorBy">value</option>
<option name="colorMode">none</option>
<option name="rangeColors">["0x555","0x555"]</option>
<option name="rangeValues">[0]</option>
<option name="useColors">1</option>
</single>
<single id="singleWithCSSOverride4">
<search>
<query>| makeresults
| eval state="BAD"
| table state</query>
<earliest>-15m</earliest>
<latest>now</latest>
<done>
<eval token="tokColor2">case($result.state$=="GOOD","#53a051",true(),"#dc4e41")</eval>
</done>
</search>
<option name="colorBy">value</option>
<option name="colorMode">none</option>
<option name="rangeColors">["0x555","0x555"]</option>
<option name="rangeValues">[0]</option>
<option name="useColors">1</option>
</single>
</panel>
</row>
</dashboard>
