Are you a member of the Splunk Community?
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Changing the font size in panels for values
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@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!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@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!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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!!!"
Observe and Secure All Apps with Splunk
Splunk Decoded: Business Transactions vs Business IQ
Fastest way to demo Observability
