topic Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x? in Dashboards & Visualizations

How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

akanno — Wed, 08 Oct 2014 05:53:03 GMT

Hi, splunk community.

We want to change to font size of title and legend of panel in dashboard.
In splunk v5,change to font size of legend by setting to
" ＜option name="charting.legend.labelStyle.defaultTextFormat"＞ {italic:true,size:16}＜/option＞" in XML

below link is manual
http://docs.splunk.com/Documentation/Splunk/5.0/Viz/CustomChartingConfig-ChartLegend

However,it's parameter is nothing in splunk v6.

And so, we will try to set css.
Though,we do not know selector of title and legend of panel in dashboard.

Please help me.

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

markthompson — Wed, 08 Oct 2014 08:12:08 GMT

You can always convert dashboard to HTML and then change it using HTML code. Embedded CSS.

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

tom_frotscher — Wed, 08 Oct 2014 08:17:14 GMT

Hi akanno,

you can extend your simple xml dashboard with custom css styles. You can simply import a css file within the dashboard or form tag like this:

<dashboard stylesheet="myStyleSheet.css">

Here you can get informations about the details: link

The selector of the element you want can be found by using the developer tools of your browser. It should be something like rightclick the element and in the menue chose "inspect element".

Greetings

Tom

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

akanno — Wed, 08 Oct 2014 08:32:36 GMT

Thank you for your response markthompson.
I convert dashboard to HTML and then I add "class=test" in h3 tag in HTML
for example, ＜h3　class="test "＞testTaitle＜/h3＞

Then, I created css file like below
.test {
font-size: 16px;
}

Therefore,I change font size for the title.
Though, I don't know that change font size for the legend.

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

markthompson — Wed, 08 Oct 2014 08:46:18 GMT

Can you post the HTML it's giving for the legend, or you could right click and inspect element and see what CSS classes are on the legend, and adapt those with your embedded css.

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

akanno — Wed, 08 Oct 2014 09:13:44 GMT

Hi Tom,
Thank you for response.

I found a selector in the way you told me.
Selector I found is "g.highcharts-legend"
Therefore,I set following in css

g.highcharts-legend {
font-size: 56px;
}

However,font size of legend don't change.
Why?

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

akanno — Wed, 08 Oct 2014 09:30:46 GMT

I posted the html source.
I am sorry for the difficult to see

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

tom_frotscher — Wed, 08 Oct 2014 09:51:25 GMT

Can you try this :

g.highcharts-legend-item:nth-child(1) > text:nth-child(2) > tspan:nth-child(1) {
  font-size: 56px;
}

This should manipulate at least the first item of the legend.

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

akanno — Wed, 08 Oct 2014 10:22:41 GMT

Thank you very much!
It is great!!
I can change font size.

I'd like to ask another one,
I set following in css

h3 {
font-size: 56px;
}

Then,font size of all panel title is changed.
However,I want to change only second panel title.
How set in css?

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

markthompson — Wed, 08 Oct 2014 10:35:00 GMT

Use a class such as
.size {
font-size: 56px;
}
and then for the h3 put h3 class="size" and it will change just thsoe that have class="size" applied.

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

tom_frotscher — Wed, 08 Oct 2014 11:12:53 GMT

Try this one:

#element2 > div:nth-child(1) > h3:nth-child(2){
font-size: 56px;
}

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

akanno — Thu, 09 Oct 2014 00:20:49 GMT

Thank you very much!

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

andrewsmileyaff — Tue, 29 Sep 2020 20:00:54 GMT

Reading through the other answer I think they covered it off nicely. Just adding a comment to show what I ended up doing in case it helps anyone else who isn't very familiar with CSS and HTML. I converted the dashboard to HTML and then added a section to make the title WAY bigger. Using this on a TV in the dev area and wanted people all around this end of the floor to be able to easily see it. I've bolded the text I added.

 />
 href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css"
/>
href="{{SPLUNKWEB_URL_PREFIX}}/static/css/build/pages/dashboard-simple-bootstrap.min.css"
/>
href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css"
/> ****

Re: How to change the font size of the title and legend of a dashboard panel in Splunk 6.x?

astatrial — Tue, 13 Aug 2019 12:05:25 GMT

Hello Tom,
I am trying to use this answer in order to change my legend size and i don't fully understand it. Can you please explain me this part

:nth-child(1) > text:nth-child(2) > tspan:nth-child(1)

Thanks in advanced !!