topic Re: How to disable mouse hover on bar chart in XML in Dashboards & Visualizations

How to disable mouse hover on bar chart in XML

harish_ka — Tue, 12 Dec 2017 09:12:03 GMT

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

Re: How to disable mouse hover on bar chart in XML

mayurr98 — Tue, 12 Dec 2017 09:17:16 GMT

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!

Re: How to disable mouse hover on bar chart in XML

niketn — Tue, 29 Sep 2020 17:13:01 GMT

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

Re: How to disable mouse hover on bar chart in XML

harish_ka — Tue, 12 Dec 2017 09:27:23 GMT

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

Re: How to disable mouse hover on bar chart in XML

mayurr98 — Tue, 12 Dec 2017 09:45:03 GMT

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

Re: How to disable mouse hover on bar chart in XML

harish_ka — Tue, 12 Dec 2017 11:33:19 GMT

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?

Re: How to disable mouse hover on bar chart in XML

damien_chillet — Tue, 12 Dec 2017 11:43:00 GMT

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

Re: How to disable mouse hover on bar chart in XML

harish_ka — Wed, 13 Dec 2017 06:31:54 GMT

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

Re: How to disable mouse hover on bar chart in XML

niketn — Wed, 13 Dec 2017 07:52:29 GMT

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

Re: How to disable mouse hover on bar chart in XML

harish_ka — Wed, 13 Dec 2017 07:57:58 GMT

Cool.. That worked
Thanks @niketnilay

Re: How to disable mouse hover on bar chart in XML

vikashperiwal — Tue, 04 Aug 2020 10:37:52 GMT

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

Re: How to disable mouse hover on bar chart in XML

niketn — Tue, 04 Aug 2020 15:30:11 GMT

@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