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!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...