Dashboards & Visualizations

Single panel's Trend Interpretation size and font size

temuulen
New Member

Hi guys , is there any simple CSS code that can edit Single panel's Trend Interpretation size and font size?

I just need it smaller.

alt text

Tags (2)
0 Karma
1 Solution

niketn
Legend

@temuulen if give your Single Value id of my_single_value you can try the following Simple XML CSS Extension, you may have to play a bit with CSS as per your needs:

          #my_single_value .delta-label{
            font-size:300% !important;
          }
          #my_single_value g.delta-indicator {
              transform: translateY(-60px);
          }

Following is the run anywhere Simple XML example.

<dashboard>
  <label>Single Value with Trend Indicator Font</label>
  <row>
    <panel>
      <html>
        <style>
          #my_single_value .delta-label{
            font-size:300% !important;
          }
          #my_single_value g.delta-indicator {
              transform: translateY(-60px);
          }
        </style>
      </html>
      <single id="my_single_value">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count as error</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</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!!!"

View solution in original post

0 Karma

niketn
Legend

@temuulen if give your Single Value id of my_single_value you can try the following Simple XML CSS Extension, you may have to play a bit with CSS as per your needs:

          #my_single_value .delta-label{
            font-size:300% !important;
          }
          #my_single_value g.delta-indicator {
              transform: translateY(-60px);
          }

Following is the run anywhere Simple XML example.

<dashboard>
  <label>Single Value with Trend Indicator Font</label>
  <row>
    <panel>
      <html>
        <style>
          #my_single_value .delta-label{
            font-size:300% !important;
          }
          #my_single_value g.delta-indicator {
              transform: translateY(-60px);
          }
        </style>
      </html>
      <single id="my_single_value">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count as error</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</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!!!"
0 Karma

temuulen
New Member

Thanks Niketnilay! that is what i was looking for.

0 Karma
Get Updates on the Splunk Community!

Stay Connected: Your Guide to November Tech Talks, Office Hours, and Webinars!

What are Community Office Hours? Community Office Hours is an interactive 60-minute Zoom series where ...

Index This | When is October more than just the tenth month?

October 2025 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Observe and Secure All Apps with Splunk

  Join Us for Our Next Tech Talk: Observe and Secure All Apps with SplunkAs organizations continue to innovate ...