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 | 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 ...