Dashboards & Visualizations

Heatmap - Custom Visualization

pipipipi
Path Finder

Hi all,

I installed Heat Map Viz and I use it.
https://splunkbase.splunk.com/app/4460/

I want to change x axis label color because I want to use it in dark mode.
when it turned dark mode, x axis(date) is difficult to see.
But, I have no idea to change label color.

Is there anyone know how to change x axis label color?
(I know this is svg.)
Or Is there anyone know option name to change x axis label color?
(like heat-map-viz.heat-map-viz.yaxiswidth)
Thank you so much.

Labels (2)
0 Karma
1 Solution

niketn
Legend

@pipipipi you can use CSS Style override like the one mentioned below where id of your heat map chart is #mychart (PS: I have used grey fill color as it is visible in both Light and Dark theme. You can try white if your dashboard will always have dark theme.)

    <panel>
      <html depends="$hideCSSStyleOverride$">
        <style>
          #mychart g.apexcharts-xaxis-texts-g text{
            fill: grey !important;
          }
        </style>
      </html>
      <viz id="mychart" type="heat-map-viz.heat-map-viz">

 However, since the chart is handling all other elements in the Dark Theme, it would be better to contact Developer Daniel Sapvin though the contact he has provided for raising bug.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@pipipipi you can use CSS Style override like the one mentioned below where id of your heat map chart is #mychart (PS: I have used grey fill color as it is visible in both Light and Dark theme. You can try white if your dashboard will always have dark theme.)

    <panel>
      <html depends="$hideCSSStyleOverride$">
        <style>
          #mychart g.apexcharts-xaxis-texts-g text{
            fill: grey !important;
          }
        </style>
      </html>
      <viz id="mychart" type="heat-map-viz.heat-map-viz">

 However, since the chart is handling all other elements in the Dark Theme, it would be better to contact Developer Daniel Sapvin though the contact he has provided for raising bug.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

pipipipi
Path Finder

Thank you so much.
I can change my label.
I can not find g.apexcharts-xaxis-texts-g

How did you find it?

 

 

0 Karma

niketn
Legend

Hi @pipipipi I used Browser Inspector to identify the CSS Selector. You can refer to one of my older answers with the steps: https://community.splunk.com/t5/Dashboards-Visualizations/How-do-I-update-panel-color-in-Splunk-usin...

 

Also do read the Clara-fication blog by @cmerriman on CSS in Simple XML Dashboards demystification!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Index This | When is October more than just the tenth month?

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

Observe and Secure All Apps with Splunk

  Join Us for Our Next Tech Talk: Observe and Secure All Apps with SplunkAs organizations continue to innovate ...

What’s New & Next in Splunk SOAR

 Security teams today are dealing with more alerts, more tools, and more pressure than ever.  Join us for an ...