All Apps and Add-ons
Highlighted

Change Background Color of Water Gauge?

Explorer

Hello! I have been trying to figure this out the whole day with zero success.

I want to change the background color of my Water Gauge (from white to black)

I have it like this:

alt text

And I want something like this:

alt text

I have tried this with HTML:

.highcharts-container {
     background: #000000 !important;
}

and also tried this with XML:

<option name="water_gauge.gauge.bgColor">#000000</option>

But none of them worked

Can someone guide me a little bit more, please?

Thank you!

0 Karma
Highlighted

Re: Change Background Color of Water Gauge?

Legend

@Ginzoa while you can request the app developer directly for that enhancement for background color to be available as an option.

If you want you can use following CSS override where myWaterGauge is the Water Gauge id and myPanel is panel id.

          #myWaterGauge svg, #myPanel.dashboard-panel{
            background: black !important;
          }

Following is a run anywhere example for you to try out and confirm!

alt text

Following is the Simple XML code:

<dashboard>
  <label>Water gauge Background Color</label>
  <row>
    <panel id="myPanel">
      <html>
        <style>
          #myWaterGauge svg, #myPanel.dashboard-panel{
            background: black !important;
          }
          #myPanel h3{
            color: #178BCA !important;
          }
        </style>
      </html>
      <viz id="myWaterGauge" type="cuviz_water_gauge.water_gauge">
        <title>Most Active Splunkd Component</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=INFO
| top 1 component showcount=f
| fields percent</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
</dashboard>



| eval message="Happy Splunking!!!"


View solution in original post

Highlighted

Re: Change Background Color of Water Gauge?

Explorer

Absolutely perfect! Thank you so much!

0 Karma