Join the Conversation
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Re: Heatmap - Custom Visualization
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@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!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@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!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thank you so much.
I can change my label.
I can not find g.apexcharts-xaxis-texts-g
How did you find it?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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!!!"
The OpenTelemetry Certified Associate (OTCA) Exam
From Manual to Agentic: Level Up Your SOC at Cisco Live
Splunk Classroom Chronicles: Training Tales and Testimonials (Episode 4)
