Solved: Dashboard CSS: Stack SingleValue Panel

morethanyell · ‎08-01-2019

Hi,

How do we write CSS to achieve layout shown on the screenshot? I've tried the CSS below but it's not working

<html>
    <style>
        #timelinechart{
            width:75% !important;
            height:100% !important;
        }
        #singlevalue1{
            width:25% !important;
            height:50% !important;
        }
        #singlevalue2{
            width:25% !important;
            height:50% !important;
        }
    </style>
</html>

niketn · ‎08-01-2019

@morethanyell you can refer to one of my older answers to stack single values and adjust as per your needs.

https://answers.splunk.com/answers/717452/how-to-stack-two-data-element-visualizations.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

woodcock · ‎08-06-2019

This can be done with Sideview Utils which is a much more flexible dashboarding framework for splunk built by an ex-employee. @sideview can tell you more.

niketn · ‎08-01-2019

@morethanyell you can refer to one of my older answers to stack single values and adjust as per your needs.

https://answers.splunk.com/answers/717452/how-to-stack-two-data-element-visualizations.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

Dashboard CSS: Stack SingleValue Panel

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

May 2026 Splunk Expert Sessions: Security & Observability

Network to App: Observability Unlocked [May & June Series]

SPL2 Deep Dives, AppDynamics Integrations, SAML Made Simple and Much More on Splunk ...

Join the Conversation