Splunk Search

How to place a solid border around a chart panel using XML/CSS?

MB2016
New Member

I'd like to place a solid border around a chart panel in XML - I'm struggling to comprehend how this is done within XML/CSS.

I was able to add a border to the Single Value panels in the 'Image Overlay with Single Values' example from the Dashboard Examples app by modifying the CSS as below:

.singleValue {
    font-size: 4em;
    font-weight: bold;
    background-size: cover;

    height: 100px;
    width: 100px;

    border-style: solid;
    border-color: #ff0000 #0000ff;

But I understand this is done in an HTML panel.

I have limited CSS / XML experience and have spent several hours attempting to figure out how to apply this to a chart panel in XML.

I have attempted to apply a Class directly in the xml

Eg  <chart class="ColourBorder">

.ColourBorder {

    border-color: #ff0000 #0000ff
    border-style: solid;
}

I believe I have this all fundamentally muddled.

thank you.

MB

0 Karma

jeffland
SplunkTrust
SplunkTrust

Did you try placing a .css file in SPLUNK_HOME/et/apps/your_app/appserver/static and referencing it with this in your dashboard XML:

<form stylesheet="your_file.css">
  <fieldset ...

(You can also place stylesheet="your_file.css" in the dashboard tag if you don't have inputs in your dashboard). After that, don't forget to restart splunkweb (or call debug/refresh) and clear your browser cache.

0 Karma

stephane_cyrill
Builder

Hi, you can only use css inside of an HTML tag. So, if possible you should first of all try enclosing that part of the code with HTML TAG.

0 Karma

MB2016
New Member

the question is how? I'm struggling to figure this how - how do you place a CHART panel within the HTML to reference the CSS to turn borders on?

0 Karma
Get Updates on the Splunk Community!

Brains, Bytes, and Boston: Learn from the Best at .conf25

When you think of Boston, you might picture colonial charm, world-class universities, or even the crack of a ...

Splunk AppDynamics Agents Webinar Series

Mark your calendars! On June 24th at 12PM PST, we’re going live with the second session of our Splunk ...

SplunkTrust Application Period is Officially OPEN!

It's that time, folks! The application/nomination period for the 2025 SplunkTrust is officially open! If you ...