Splunk Search
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question

How do you fix the font size of each single value display panel?

shishirkumar
Engager
‎12-31-2018 12:52 AM

alt text

How do I fix the font size of each panel as in this i have used single value display with concatenate option but as per data size is increasing decreasing of font.

Attached image for reference.

Tags (2)
Preview file
24 KB
0 Karma
Reply

sdchakraborty
Contributor
‎01-02-2019 02:40 AM

Hi,

Please try the below code. Please note that Splunk is doing auto resize to fit those three single values inside panels. If you use fixed size you need to choose a font size that all those three values fit inside.

<dashboard>
  <label>Sid</label>
  <row>
    <panel>
      <html>
         <style>
           #MonthlyActivityReport .single-value .single-result {
             font-size: 20px !important;
           }
         </style>
       </html>
      <single id="MonthlyActivityReport">
        <search>
          <query>|  makeresults
| eval MonthlyActivityReport = 2371
| eval MonthlyActivityReport_formatted = "MonthlyActivityReport"." - ".MonthlyActivityReport
| table MonthlyActivityReport_formatted</query>
          <earliest>0</earliest>
          <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">["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">0</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel>
      <html>
         <style>
           #mmanolis .single-value .single-result {
             font-size: 20px !important;
           }
         </style>
       </html>
      <single id="mmanolis">
        <search>
          <query>|  makeresults
| eval mmanolis = 2063
| eval mmanolis_formatted = "mmanolis"." - ".mmanolis
| table mmanolis_formatted</query>
          <earliest>0</earliest>
          <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">["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">0</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel>
      <html>
         <style>
           #Cambia .single-value .single-result {
             font-size: 20px !important;
           }
         </style>
       </html>
      <single id="Cambia">
        <search>
          <query>|  makeresults
| eval Cambia = 2371
| eval Cambia_formatted = "Cambia"." - ".Cambia
| table Cambia_formatted</query>
          <earliest>0</earliest>
          <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">["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">0</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
</dashboard>
Reply

niketn
Legend
‎01-02-2019 03:53 AM

@sdchakraborty the style sections can be at one place in any one of <html> panels. Also it would be better to hide the html panel used for CSS style override as it will add blank space inside the panel.

@shishirkumar couple of point:
1) Single value panel adjusts font size depending on the length of data being displayed. So, if you use CSS override you will end up hard-coding the size.
2) Seems like first part of your single value is fixed text and also causes Single Value data to be long. It would better suit as Title or part of Caption since that would be static.
3) Multiple <single> value visualizations within same panel will not have gaps between them. So try that out as well.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply

sdchakraborty
Contributor
‎01-02-2019 03:57 AM

Agree with you @niketnilay

0 Karma
Reply

shishirkumar
Engager
‎12-31-2018 12:54 AM

how to do XML itself rather then CSS files ?

0 Karma
Reply
Get Updates on the Splunk Community!

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

 Are you tired of troubleshooting delays caused by siloed frontend, application, and network data? We've got a ...

Splunk Observability for AI

Don’t miss out on an exciting Tech Talk on Splunk Observability for AI!Discover how Splunk’s agentic AI ...

🔐 Trust at Every Hop: How mTLS in Splunk Enterprise 10.0 Makes Security Simpler

From Idea to Implementation: Why Splunk Built mTLS into Splunk Enterprise 10.0  mTLS wasn’t just a checkbox ...