Dashboards & Visualizations

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

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

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

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

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

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

Contributor

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

alt text

0 Karma