Dashboards & Visualizations

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

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

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

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="{{SPLUNKWEBURLPREFIX}}/static/css/build/pages/dashboard-simple-bootstrap.min.css"
/>
href="{{SPLUNKWEBURLPREFIX}}/static/app/search/dashboard.css"
/> ****

0 Karma

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

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

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.

Communicator

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

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

Try this one:

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

Communicator

Thank you very much!

0 Karma

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

Builder

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

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

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

Communicator

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

0 Karma