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!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...