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!

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...