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!

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...

Wondering How to Build Resiliency in the Cloud?

IT leaders are choosing Splunk Cloud as an ideal cloud transformation platform to drive business resilience,  ...

Updated Data Management and AWS GDI Inventory in Splunk Observability

We’re making some changes to Data Management and Infrastructure Inventory for AWS. The Data Management page, ...