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
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!

Tech Talk Recap | Mastering Threat Hunting

Mastering Threat HuntingDive into the world of threat hunting, exploring the key differences between ...

Observability for AI Applications: Troubleshooting Latency

If you’re working with proprietary company data, you’re probably going to have a locally hosted LLM or many ...

Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?

In the age of AI, every tool promises to make our lives easier. From summarizing content to writing code, ...