Dashboards & Visualizations

Can a dashboard panel's shape be changed?

roychen
Path Finder

Hello,

Splunk's dashboard panels, as well as single values within the panels, have a rounded rectangle shape.

Is it possible to change the dashboard panel's, and/or the single value's shape, to a circle, for example, through a combination of Advanced XML and modifying application.css?

Thanks in advance.

Tags (1)
0 Karma
1 Solution

Drainy
Champion

Yes, through CSS. Whilst you wouldn't be able to change a div to a circle, you could certainly remove the borders and do some magic with background images or other border tricks to change the overall shape to be something else.

EDIT: I may have been slightly wrong.

Well, I thought my colleague would post an witty retort to my declaration that ITS IMPOSSIBLE!
Anyway, since he hasn't, heres the code to make a circular div, magic!

border-radius: 50% 50% 50% 50%;

padding: 13%;

Apply this as you need to whatever divs you like, also probably also worth testing it across browsers.

View solution in original post

Drainy
Champion

Yes, through CSS. Whilst you wouldn't be able to change a div to a circle, you could certainly remove the borders and do some magic with background images or other border tricks to change the overall shape to be something else.

EDIT: I may have been slightly wrong.

Well, I thought my colleague would post an witty retort to my declaration that ITS IMPOSSIBLE!
Anyway, since he hasn't, heres the code to make a circular div, magic!

border-radius: 50% 50% 50% 50%;

padding: 13%;

Apply this as you need to whatever divs you like, also probably also worth testing it across browsers.

roychen
Path Finder

Thanks, Drainy.

I've tried playing around with it and it works.

I'm not good enough at CSS to figure out how to re-size and re-position the single values to small circles however, but I'll go check out how it's done.

0 Karma

jonuwz
Influencer

For added lulz - round single values

.SingleValue {
background-size: cover;
border-radius: 50% 50% 50% 50%;
height: 100px;
width: 100px;
}

.singleResult {
position: relative;
top: 40%;
}

.singleLabel {
position: relative;
top: 40%;
}

triangles on the other hand ...

Get Updates on the Splunk Community!

How to Monitor Google Kubernetes Engine (GKE)

We’ve looked at how to integrate Kubernetes environments with Splunk Observability Cloud, but what about ...

Index This | How can you make 45 using only 4?

October 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

Splunk Education Goes to Washington | Splunk GovSummit 2024

If you’re in the Washington, D.C. area, this is your opportunity to take your career and Splunk skills to the ...