topic Re: How to place a solid border around a chart panel using XML/CSS? in Splunk Search

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

MB2016 — Fri, 26 Feb 2016 02:31:47 GMT

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.

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

stephane_cyrill — Fri, 26 Feb 2016 09:37:58 GMT

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.

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

MB2016 — Mon, 29 Feb 2016 01:13:25 GMT

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?

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

jeffland — Tue, 29 Sep 2020 08:56:38 GMT

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.