Solved: Change both Background and Text Colour in Single V...

nabeel652 · ‎07-30-2024

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

bowesmana · ‎07-30-2024

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

gcusello · ‎07-30-2024

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

bowesmana · ‎07-30-2024

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>

gcusello · ‎07-31-2024

Hi @nabeel652 ,

good for you, see next time!

Ciao and happy splunking

Giuseppe

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

Change both Background and Text Colour in Single Value visualisation Conditionally

Classic dashboard

CSS

single value

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Announcing Modern Navigation: A New Era of Splunk User Experience

Modernize your Splunk Apps – Introducing Python 3.13 in Splunk

Step into “Hunt the Insider: An Splunk ES Premier Mystery” to catch a cybercriminal ...

Join the Conversation