Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

Changing the font size in panels for values

mattbellezza
Explorer
‎09-06-2017 11:02 AM

I want to make the units label a lot smaller than the font size for the actual single value I have produced. Here is the panel as it stands right now. Both the value and the unit label are the same size.

<panel>
      <html>
         <style type="text/css">
         .single-value .single-result {
     font-size: 120px;
 }        .single-value .single-units { font-size: 20px; }
       </style>
     </html>
      <single>
        <title>Indexing Rate</title>
        <search>
          <query>| rest /services/server/introspection/indexer 
| eval average_KBps = round(average_KBps, 0) 
| stats sum(average_KBps)</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">all</option>
        <option name="underLabel">Total Indexing Rate</option>
        <option name="unit">KB/S</option>
      </single>
    </panel>
Tags (2)
Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎09-06-2017 06:59 PM

@mattbellezza, I am sure this has been answered before. So, what you are looking for is to override the font-size of .single-result-unit not .single-units.

Following are some considerations:
1) Set size through percent not absolute pixels, since the Single Value text size is dynamic based on the single value being too large or small. Like font-size: 30%;

2) If CSS does not apply, you might have to set !important to override any other style for the same selected element i.e. font-size: 30% !important;

3) The above code in your example will apply to all Single Values in your Dashboard. If you want the CSS override to be applicable to specific Single value then it is better to add ID to Single Value and set CSS Selector based on the same. In the following example I have set it based on id="singleViz1"

4) In order to find exact CSS Selector of which element needs to be modified and whether the CSS override is being applied or not, it is better to use Browser's Inspector Tool

  <row>
    <panel>
      <html>
        <style type="text/css">
          #singleViz1 .single-value .single-result {
      font-size: 120px;
    }     #singleViz1 .single-value .single-result-unit { font-size: 30%; }
        </style>
      </html>
      <single id="singleViz1">
        <title>Indexing Rate</title>
        <search>
          <query>| rest /services/server/introspection/indexer 
  | eval average_KBps = round(average_KBps, 0) 
  | stats sum(average_KBps)</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">all</option>
        <option name="underLabel">Total Indexing Rate</option>
        <option name="unit">KB/S</option>
      </single>
    </panel>
  </row>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Reply
Solved! Jump to solution
Solution

niketn
Legend
‎09-06-2017 06:59 PM

@mattbellezza, I am sure this has been answered before. So, what you are looking for is to override the font-size of .single-result-unit not .single-units.

Following are some considerations:
1) Set size through percent not absolute pixels, since the Single Value text size is dynamic based on the single value being too large or small. Like font-size: 30%;

2) If CSS does not apply, you might have to set !important to override any other style for the same selected element i.e. font-size: 30% !important;

3) The above code in your example will apply to all Single Values in your Dashboard. If you want the CSS override to be applicable to specific Single value then it is better to add ID to Single Value and set CSS Selector based on the same. In the following example I have set it based on id="singleViz1"

4) In order to find exact CSS Selector of which element needs to be modified and whether the CSS override is being applied or not, it is better to use Browser's Inspector Tool

  <row>
    <panel>
      <html>
        <style type="text/css">
          #singleViz1 .single-value .single-result {
      font-size: 120px;
    }     #singleViz1 .single-value .single-result-unit { font-size: 30%; }
        </style>
      </html>
      <single id="singleViz1">
        <title>Indexing Rate</title>
        <search>
          <query>| rest /services/server/introspection/indexer 
  | eval average_KBps = round(average_KBps, 0) 
  | stats sum(average_KBps)</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">all</option>
        <option name="underLabel">Total Indexing Rate</option>
        <option name="unit">KB/S</option>
      </single>
    </panel>
  </row>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Reply
Solved! Jump to solution

mattbellezza
Explorer
‎09-06-2017 07:07 PM

Thanks @niketnilay. I ended up using the Browser inspect to find the corresponding ID for the portion of the Single Value I needed to resize. My code looks like this now and it worked perfectly.

<panel>
      <title>Indexing Rate</title>
      <html>
         <style type="text/css">
         .single-value .single-result {
     font-size: 120px;
 }        .single-value .single-result-unit { font-size: 20px; }
       </style>
     </html>
      <single>
        <search>
          <query>| rest /services/server/introspection/indexer 
| eval average_KBps = round(average_KBps, 0) 
| stats sum(average_KBps)</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">all</option>
        <option name="underLabel">Total Indexing Rate</option>
        <option name="unit">KB/S</option>
      </single>
    </panel>
0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎09-06-2017 07:45 PM

Sure if you want CSS Style override, for all Single Values in your dashboard above should work. Please change from 2px to 20% or 30% as per suggestion above so that reduction in size is relative rather than absolute.

Also, accept the same as answer if this works as expected.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Get Updates on the Splunk Community!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...