Dashboards & Visualizations

How to change the background color (from a CSS) of a gauge?

skender27
Contributor

Hi,

I have two gauges and a css file (dark.css) to manage the colors for all dashboard panels.
What I am trying to do is to control also the color of these gauge panels.
Is there any css specification to do this?

In my dark.css (which I put in form stylesheet=dark.css... tag in the xml source of the entire dashboard) I have:

body,.dashboard-body,.footer,.header,.app-bar,.dashboard-panel,.dashboard-cell {
background: #18353b !important; /*color of whole background
/*

And this works for all except the two gauges panels I have (they will maintain white colors at the beginning/refresh as default in Splunk and you have to click on Modify panels to make their color become same as all the dashboard background).

Any help?

Thanks,
Skender

Tags (4)
1 Solution

skender27
Contributor

With the inspector of the page (using Iceweasel -> Inspect element), I discovered that the class was called highcharts-container, so I just added it to my css file application.css like this:

body,.dashboard-body,.footer,.header,.app-bar,.dashboard-panel,.dashboard-cell,.highcharts-container {
    background: #18353b !important; /*colore background tutta la dashboard*/
    }

Problem resolved!!!
Skender

View solution in original post

nfilippi_splunk
Splunk Employee
Splunk Employee

You can also style using xml options:

<chart>
       ...
        <option name="charting.backgroundColor">#475565</option>
        <option name="charting.foregroundColor">#EBF5FF</option>
        <option name="charting.fontColor">#99CCFF</option>
</chart>

Which should result in something like this:

alt text

skender27
Contributor

With the inspector of the page (using Iceweasel -> Inspect element), I discovered that the class was called highcharts-container, so I just added it to my css file application.css like this:

body,.dashboard-body,.footer,.header,.app-bar,.dashboard-panel,.dashboard-cell,.highcharts-container {
    background: #18353b !important; /*colore background tutta la dashboard*/
    }

Problem resolved!!!
Skender

skender27
Contributor

In order to control also the input fields for the dashboard (radio buttons, labels etc), I did the same thing:

.fieldset .input {
    width: 220px;
    color: #ddd;
}
0 Karma

skender27
Contributor

To illustrate it better, I have a situation like this below:

alt text

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...