Solved: Re: How do I turn off chart tool tips? Preferably...

ksextonmacb · ‎06-29-2017

I have a pie chart trellis in a dashboard that I want to drill down into. But hovering over a pie chart causes a gigantic tooltip to cover up the pie chart.

Here's my set of charts.

And here's what happens immediately on mouseover.

How can I turn tool tips off so I can actually access my chart?

niketn · ‎07-02-2017

@ksextonmacb, you can disable Tooltip using CSS by setting the visibility to hidden for tooltip text for Trellis chart. visibility:hidden;

If you want tolltip to be hidden in specific panel you can do the same using Panel ID (#trellisChart1 in the example below)

      <style>
        #trellisChart1 .highcharts-tooltip{
          visibility:hidden;
        }
      </style>

You can also save the CSS Style as hide_tooltip.css and include the same in multiple dashboards. Following is the run anywhere example based on Splunks _internal Index and hides all Tooltip text in the dashboard.

  <row>
    <panel>
    <html>
      <style>
        .highcharts-tooltip{
          visibility:hidden;
        }
      </style>
    </html>
      <chart  id="trellisChart1">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| stats count(eval(log_level=="WARN")) as WARN count(eval(log_level=="ERROR")) as ERROR by component
| head 5</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">collapsed</option>
        <option name="charting.axisTitleY.visibility">collapsed</option>
        <option name="charting.axisTitleY2.visibility">collapsed</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">pie</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.placement">none</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">small</option>
        <option name="trellis.splitBy">_aggregation</option>
      </chart>
    </panel>
  </row>

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

View solution in original post

jackreeves · ‎10-15-2017

Can this be done in simple XML without using CSS?

niketn · ‎10-15-2017

@jackreeves, in the above example CSS has been applied within Simple XML using <style> tag withing <html> panel. This does not require you to apply a separate CSS file and reboot/refresh Splunk environement. Refer to snippet below

   <row>
     <panel>
     <html depends="$alwaysHideCSSStyle$">
       <style>
         .highcharts-tooltip{
           visibility:hidden;
         }
       </style>
     </html>

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

jackreeves · ‎10-16-2017

Brilliant - that has worked perfectly! Thanks a lot

niketn · ‎10-16-2017

@jackreeves, glad it worked. Please up vote the comment/s that helped 🙂

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

cblanton · ‎06-17-2019

Hi @niketnilay, how could I apply this to only a single chart/panel? the above applies to the whole dashboard. or preferably, how could I just move the tooltip to the side so it doesn't cover the chart?

niketn · ‎06-17-2019

@cblaton in the example I had added a chart ID so that CSS override applied to only one chart. Refer to Simple XML snippet

<chart id="trellisChart1">

And corresponding CSS selector #trellisChart1

   <style>
     #trellisChart1 .highcharts-tooltip{
       visibility:hidden;
     }
   </style>

Please refer to accepted answer. Do up-vote the answer/comment/s if they helped.

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

niketn · ‎07-02-2017

@ksextonmacb, you can disable Tooltip using CSS by setting the visibility to hidden for tooltip text for Trellis chart. visibility:hidden;

If you want tolltip to be hidden in specific panel you can do the same using Panel ID (#trellisChart1 in the example below)

      <style>
        #trellisChart1 .highcharts-tooltip{
          visibility:hidden;
        }
      </style>

You can also save the CSS Style as hide_tooltip.css and include the same in multiple dashboards. Following is the run anywhere example based on Splunks _internal Index and hides all Tooltip text in the dashboard.

  <row>
    <panel>
    <html>
      <style>
        .highcharts-tooltip{
          visibility:hidden;
        }
      </style>
    </html>
      <chart  id="trellisChart1">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| stats count(eval(log_level=="WARN")) as WARN count(eval(log_level=="ERROR")) as ERROR by component
| head 5</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">collapsed</option>
        <option name="charting.axisTitleY.visibility">collapsed</option>
        <option name="charting.axisTitleY2.visibility">collapsed</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">pie</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.placement">none</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">small</option>
        <option name="trellis.splitBy">_aggregation</option>
      </chart>
    </panel>
  </row>

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

ksextonmacb · ‎07-05-2017

This hides the tooltips, which is exactly what I originally asked for, but it doesn't allow clicking through them onto the chart.

For that you need your css to have "pointer-events: none", like below.

.highcharts-tooltip{
         visibility: hidden;
         pointer-events: none;
       }

This answer's still right, just leaving more information for the next person that has this issue.

niketn · ‎07-05-2017

As far as you want to completely disable drilldown along with tooltip. However, I feel drilldown still works as it works with the run anywhere search I had provided in the other answer.

https://answers.splunk.com/answers/551802/how-can-i-get-drill-down-working-for-a-trellis-cha.html

Let me have a look at that answer to ensure that drilldown is working the way you expect.

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

niketn · ‎07-05-2017

@ksextonmacb, For enabling clicking through tooltip area the same has to be overriden through svg related CSS

       <style>
         #dev_trellis .highcharts-tooltip{
           visibility:hidden;
           top:-9999px !important;
         }
         #dev_trellis .highcharts-tooltip path{
           d: path('') !important;
         }   
       </style>

PS: top:-9999px is existing logic which seems to plot tooltip text outside defined area. This ensures Tooltip text is not displayed.
I have added svg path to be empty d:path(''), so that Tooltip box is not plotted. Please try out these and confirm. I have kept visibility:hidden; just to ensure that Tooltip is not displayed at all. However, this is not required with above two CSS styles.

Please check and confirm.

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

How do I turn off chart tool tips? Preferably in a dashboard in the source XML.

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor