Dashboards & Visualizations

How to disable mouse hover on bar chart in XML

harish_ka
Communicator

I want to disable mouse hover feature on bar chart, any option to disable it in xml itself??

0 Karma
1 Solution

niketn
Legend

[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!!!"

View solution in original post

niketn
Legend

[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!!!"

vikashperiwal
Path Finder

@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>

0 Karma

niketn
Legend

@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!!!"
0 Karma

harish_ka
Communicator

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?

0 Karma

niketn
Legend

@harish_ka, I have updated my answer with id. You need a space between ID and Class CSS Selector.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

harish_ka
Communicator

Cool.. That worked
Thanks @niketnilay

0 Karma

damien_chillet
Builder

Don't forget the !important as it is what makes it take priority over existing CSS.

0 Karma

harish_ka
Communicator

Yes, i tried with "!important", still it didn't work..
The "id" should be created for Panel only right?

0 Karma

mayurr98
Super Champion
0 Karma

harish_ka
Communicator

Thanks for your response Mayurr98.
Is there any charting option available to add in "XML" itself to disable it ..

0 Karma

mayurr98
Super Champion

@harish_ka
No, there is no charting option available to add in "XML" as of now.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...