Dashboards & Visualizations

how to color a column with custome value?

anooshac
Communicator

Hi All,

I have few columns with is in the format "21 (31%)" , these are the value and percentage of the value. I want to use MinMidMax for the coloring based on the percentage. But i am not able to use it directly since it is a customized value. Any one knows any solution for coloring such columns?

Labels (2)
Tags (2)
0 Karma

bowesmana
SplunkTrust
SplunkTrust

One way you can do it is using the hidden multivalue technique where you store a number (or even the colour) as a second value to that number, which is hidden through CSS.

The use a format expression to colour the cell

See this example

    <panel>
      <title>Colour formatting for ranges of percentages</title>
      <html depends="$hidden$">
        <style>
          #coloured_cell4 table tbody td div.multivalue-subcell[data-mv-index="1"]{
            display: none;
          }
        </style>
      </html>
      <table id="coloured_cell4">
        <search>
          <query>| makeresults count=10
| fields - _time
| eval v=random() % 100
| eventstats sum(v) as totv
| eval perc=round(v/totv*100)
| eval v=v." (".perc."%)"
| eval v=mvappend(v, tostring(case(perc&lt;=10, 1, perc&lt;=20, 2, perc&lt;=100, 3)))</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="refresh.display">progressbar</option>
        <format type="color" field="v">
          <colorPalette type="expression">case(mvindex(value, 1) == "1", "#00FF00", mvindex(value, 1) == "2", "#FFBB00", mvindex(value, 1) == "3", "#FF0000")</colorPalette>
        </format>
      </table>
    </panel>
0 Karma

anooshac
Communicator

@bowesmana, thanks for the reply. It is working perfectly fine. I missed the html part for hiding the multivalue.

Thank you so much !

0 Karma

bowesmana
SplunkTrust
SplunkTrust

Did you add the CSS and also the table ID?

Also yes, the mid/min/max is what you set in this statement

| eval v=mvappend(v, tostring(case(perc<=10, 1, perc<=20, 2, perc<=100, 3)))

So you set your ranges with that setting, so add a 1 for min, 2 for mid and 3 for max and then in the format, decide the colours you want.

0 Karma
Get Updates on the Splunk Community!

.conf25 Community Recap

Hello Splunkers, And just like that, .conf25 is in the books! What an incredible few days — full of learning, ...

Splunk App Developers | .conf25 Recap & What’s Next

If you stopped by the Builder Bar at .conf25 this year, thank you! The retro tech beer garden vibes were ...

Congratulations to the 2025-2026 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...