Dashboards & Visualizations

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

akanno
Communicator

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.
alt text

alt text

1 Solution

tom_frotscher
Builder

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

View solution in original post

andrewsmileyaff
Engager

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"
/> ****

0 Karma

tom_frotscher
Builder

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

akanno
Communicator

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?

0 Karma

tom_frotscher
Builder

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.

astatrial
Contributor

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 !!

0 Karma

akanno
Communicator

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?

0 Karma

tom_frotscher
Builder

Try this one:

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

akanno
Communicator

Thank you very much!

0 Karma

markthompson
Builder

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.

0 Karma

markthompson
Builder

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

akanno
Communicator

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.

0 Karma

markthompson
Builder

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.

0 Karma

akanno
Communicator

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

0 Karma
Get Updates on the Splunk Community!

What’s new on Splunk Lantern in August

This month’s Splunk Lantern update gives you the low-down on all of the articles we’ve published over the past ...

Welcome to the Future of Data Search & Exploration

You have more data coming at you than ever before. Over the next five years, the total amount of digital data ...

This Week's Community Digest - Splunk Community Happenings [8.3.22]

Get the latest news and updates from the Splunk Community here! News From Splunk Answers ✍️ Splunk Answers is ...