Dashboards & Visualizations

Change both Background and Text Colour in Single Value visualisation Conditionally

nabeel652
Builder

Hello Splunkers


In Single Value viz I know we can change text colour or background one at a time but I have a requirement to control both text and background colour in a single value visualisation for example

IF result > 0 
     Text: #9c0006
      Background: #ffc7c
ELSE
    Text: #006100
    Background: #c6efce


I'm using Splunk cloud so don't have the option to use JavaScript. Simple CSS solution is needed. 
  

Any help will be appreciated 

 

Labels (3)
0 Karma
1 Solution

bowesmana
SplunkTrust
SplunkTrust

See this example - I assume the colour was #ffc7c0. Set the block colours as needed then the token+css handling to get the text colour change.

      <html depends="$hidden$">
        <style>
        #result_viz text {
          fill: $result_foreground$ !important;
        }
        </style>
      </html>
      <single id="result_viz">
        <title>Value &gt;0 colour #ffc7c0 or &lt;=0 #c6efce</title>
        <search>
          <query>| makeresults
          | eval value=(random() % 100) - 50
          </query>
          <done>
            <eval token="result_foreground">if($result.value$&gt;0, "#9c0006", "#006100")</eval>
          </done>
        </search>
        <option name="colorMode">block</option>
        <option name="drilldown">all</option>
        <option name="height">60</option>
        <option name="rangeColors">["0xc6efce","0xffc7c0"]</option>
        <option name="rangeValues">[1]</option>
        <option name="useColors">1</option>
      </single>

 

View solution in original post

0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @nabeel652 ,

for my knowledge, you can change the colour of the background or of the text based on the value of the field, but I don't think that's possible to change both of them.

Ciao.

Giuseppe

0 Karma

bowesmana
SplunkTrust
SplunkTrust

See this example - I assume the colour was #ffc7c0. Set the block colours as needed then the token+css handling to get the text colour change.

      <html depends="$hidden$">
        <style>
        #result_viz text {
          fill: $result_foreground$ !important;
        }
        </style>
      </html>
      <single id="result_viz">
        <title>Value &gt;0 colour #ffc7c0 or &lt;=0 #c6efce</title>
        <search>
          <query>| makeresults
          | eval value=(random() % 100) - 50
          </query>
          <done>
            <eval token="result_foreground">if($result.value$&gt;0, "#9c0006", "#006100")</eval>
          </done>
        </search>
        <option name="colorMode">block</option>
        <option name="drilldown">all</option>
        <option name="height">60</option>
        <option name="rangeColors">["0xc6efce","0xffc7c0"]</option>
        <option name="rangeValues">[1]</option>
        <option name="useColors">1</option>
      </single>

 

0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @nabeel652 ,

good for you, see next time!

Ciao and happy splunking

Giuseppe

P.S.: Karma Points are appreciated by all the contributors 😉

0 Karma
Get Updates on the Splunk Community!

September Community Champions: A Shoutout to Our Contributors!

As we close the books on another fantastic month, we want to take a moment to celebrate the people who are the ...

Splunk Decoded: Service Maps vs Service Analyzer Tree View vs Flow Maps

It’s Monday morning, and your phone is buzzing with alert escalations – your customer-facing portal is running ...

What’s New in Splunk Observability – September 2025

What's NewWe are excited to announce the latest enhancements to Splunk Observability, designed to help ITOps ...