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 | I am a number, but when you add ‘G’ to me, I go away. What number am I?

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

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...