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!

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

This is the second post in our Splunk Observability Cloud’s AI Assistant in Action series, in which we look at ...

Elevate Your Organization with Splunk’s Next Platform Evolution

 Thursday, July 10, 2025  |  11AM PDT / 2PM EDT Whether you're managing complex deployments or looking to ...

Splunk Answers Content Calendar, June Edition

Get ready for this week’s post dedicated to Splunk Dashboards! We're celebrating the power of community by ...