How do I change a panel's single value color using...

damucka · ‎11-21-2018

Hello,

Could you perhaps help me to change the color of the single value?

I would like to have a static blue color without ranges or any dependencies.

I tried to implement it as follows, but it did not work:

<html>
        <style type="text/css">
           #LogBackupWithCSS1 .dashboard-panel .single-value .single-result {
             font-size: 40px !important;
             color: #0877A6 !important;
           }
        </style>
</html>

The font size gets changed correctly by the above, but the font color does not.

Kind Regards,
Kamil

niketn · ‎11-21-2018

@damucka if you want static color, you should try the following (without having to use CSS)

        <option name="rangeColors">["0x0877A6","0x0877A6"]</option>
        <option name="rangeValues">[0]</option>
        <option name="colorBy">value</option>

With the colorMode as none or block (for example):

       <option name="colorMode">block</option>

Following is a run anywhere example for the same:

<dashboard>
  <label>Single Value Static Color</label>
  <row>
    <panel>
      <single>
        <title>Result Color Blue: 0x0877A6</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
|  stats count</query>
          <earliest>-24h@h</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="rangeColors">["0x0877A6","0x0877A6"]</option>
        <option name="rangeValues">[0]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel>
      <single>
        <title>Block Color 0x0877A6</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
|  stats count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x0877A6","0x0877A6"]</option>
        <option name="rangeValues">[0]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
</dashboard>

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

kamlesh_vaghela · ‎11-21-2018

@damucka

If you want to fix single value color in XML then range option will help you without specifying any range. Please try below xml option in you single view.

<option name="rangeColors">["0x0000ff","0x0000ff"]</option>
<option name="rangeValues">[0]</option>
<option name="useColors">1</option>

Sample Code

 <single>
        <search>
          <query>| stats count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="rangeColors">["0x0000ff","0x0000ff"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>

If still, you want to go with CSS then pls let me know.

Thanks

niketn · ‎11-22-2018

Did not notice that it was already answered before I had posted my answer 🙂

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

How do I change a panel's single value color using XML?

Automatic Discovery Part 1: What is Automatic Discovery in Splunk Observability Cloud ...

Real-Time Fraud Detection: How Splunk Dashboards Protect Financial Institutions

Splunk + ThousandEyes: Correlate frontend, app, and network data to troubleshoot ...

Are you a member of the Splunk Community?

How do I change a panel's single value color using XML?

Automatic Discovery Part 1: What is Automatic Discovery in Splunk Observability Cloud ...

Real-Time Fraud Detection: How Splunk Dashboards Protect Financial Institutions

Splunk + ThousandEyes: Correlate frontend, app, and network data to troubleshoot ...