All Apps and Add-ons

Change Background Color of Water Gauge?

Ginzoa
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
1 Solution

niketn
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>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
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>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

Ginzoa
Explorer

Absolutely perfect! Thank you so much!

0 Karma
Get Updates on the Splunk Community!

Index This | How many sides does a circle have?

  March 2025 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

New This Month - Splunk Observability updates and improvements for faster ...

What’s New? This month, we’re delivering several enhancements across Splunk Observability Cloud for faster and ...

What's New in Splunk Cloud Platform 9.3.2411?

Hey Splunky People! We are excited to share the latest updates in Splunk Cloud Platform 9.3.2411. This release ...