Dashboards & Visualizations

Unable to center metrics on Dashboard Row?

POR160893
Builder

Hi,

I have a row on a dashboard with a number of panels with metrics.

However, the panels appear off-set  and the metrics are not centered:

POR160893_0-1669294643048.png


Currently, the row is defined as follows:

<row>
<panel id="tn">
<title>Total</title>
<html>
<style>
single{
width: auto;
font-size=20%;
}
</style>
</html>


How can I fix this?


Thanks,

Labels (3)
0 Karma

danspav
SplunkTrust
SplunkTrust

Hi @POR160893,

 

I mocked up a similar dashboard and it looked fine in my browser when the window was maximised, but got the same bunched up look when the window was smaller.

I played around with the CSS and got it looking ok no matter how small the window went. Here's what I ended up with:

<row depends="$CSS$"><html><sytle>
.singlevalue{width:10%!important;}
.splunk-single, .svg-container{width: 100%!important;min-width:auto!important;;}
.dashboard-row .dashboard-panel .panel-element-row div.single { min-width:auto;}
rect{width: 100%!important;}
</style>
</html>
</row>


Note I set the single value width to 10% because there are 10 panels (100% / 10 = 10%)

danspav_0-1686268626147.png

Give it a go and see how you get on.

 

Cheers,
Daniel

0 Karma
Get Updates on the Splunk Community!

ATTENTION!! We’re MOVING (not really)

Hey, all! In an effort to keep this Slack workspace secure and also to make our new members' experience easy, ...

Splunk Admins: Build a Smarter Stack with These Must-See .conf25 Sessions

  Whether you're running a complex Splunk deployment or just getting your bearings as a new admin, .conf25 ...

AppDynamics Summer Webinars

This summer, our mighty AppDynamics team is cooking up some delicious content on YouTube Live to satiate your ...