Are you a member of the Splunk Community?
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- How to disable mouse hover on bar chart in XML
- 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
I want to disable mouse hover feature on bar chart, any option to disable it in xml itself??
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
[UPDATED] @harish_ka, notice that there is a space required between id and class in CSS selector. Refer to W3School for details: https://www.w3schools.com/cssref/css_selectors.asp
Following is updated code with panel id.
<row>
<panel id="YourChartID">
<html depends="$alwaysHideCSSStyle$">
<style>
#YourChartID .highcharts-tooltip{
visibility:hidden !important;
}
</style>
</html>
</panel>
</row>
@harish_ka, you can override CSS directly in Simple XML. Please try the following CSS override to hide the Tooltip. You can make it specific to particular chart (bar/column etc) then you can add id="YourChartID" and use CSS selector as #YourChartID .highcharts-tooltip
<row>
<panel>
<html depends="$alwaysHideCSSStyle$">
<style>
.highcharts-tooltip{
visibility:hidden !important;
}
</style>
</html>
</panel>
</row>
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
[UPDATED] @harish_ka, notice that there is a space required between id and class in CSS selector. Refer to W3School for details: https://www.w3schools.com/cssref/css_selectors.asp
Following is updated code with panel id.
<row>
<panel id="YourChartID">
<html depends="$alwaysHideCSSStyle$">
<style>
#YourChartID .highcharts-tooltip{
visibility:hidden !important;
}
</style>
</html>
</panel>
</row>
@harish_ka, you can override CSS directly in Simple XML. Please try the following CSS override to hide the Tooltip. You can make it specific to particular chart (bar/column etc) then you can add id="YourChartID" and use CSS selector as #YourChartID .highcharts-tooltip
<row>
<panel>
<html depends="$alwaysHideCSSStyle$">
<style>
.highcharts-tooltip{
visibility:hidden !important;
}
</style>
</html>
</panel>
</row>
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@niketn ... how can we disable hover for a particular field in bar chart ?
like for table fields used below html
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
#disablecursorapp table tbody tr td:nth-child(2){
cursor: default !important;
}
</style>
</html>
</panel>
</row>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@vikashperiwal unfortunately this will not be just CSS based solution as there is no direct link between Chart series being hovered and tooltip's DOM. You may have to try jQuery based approach. Try to adjust the example as per your needs: https://community.splunk.com/t5/Archive/How-to-change-the-dislay-value-in-graph/td-p/375473
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi @niketnilay, i tried like this and didn't work,
<panel id="aa">
<html depends="$alwaysHideCSSStyle$">
<style>
#aa.highcharts-tooltip{
visibility:hidden;
}
</style>
</html>
<title>ABCD</title>
<chart>
Am i doing the right way?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@harish_ka, I have updated my answer with id. You need a space between ID and Class CSS Selector.
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Cool.. That worked
Thanks @niketnilay
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Don't forget the !important as it is what makes it take priority over existing CSS.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Yes, i tried with "!important", still it didn't work..
The "id" should be created for Panel only right?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
look at this answer
https://answers.splunk.com/answers/330974/remove-mouse-over-from-panel-in-the-631-update.html
Let me know if it helps!
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thanks for your response Mayurr98.
Is there any charting option available to add in "XML" itself to disable it ..
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@harish_ka
No, there is no charting option available to add in "XML" as of now.
Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?
Data Persistence in the OpenTelemetry Collector
Thanks for the Memories! Splunk University, .conf25, and our Community
