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!

Stay Connected: Your Guide to May Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars this month. This ...

They're back! Join the SplunkTrust and MVP at .conf24

With our highly anticipated annual conference, .conf, comes the fez-wearers you can trust! The SplunkTrust, as ...

Enterprise Security Content Update (ESCU) | New Releases

Last month, the Splunk Threat Research Team had two releases of new security content via the Enterprise ...