Dashboards & Visualizations

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

ksextonmacb
Path Finder

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.
alt text

And here's what happens immediately on mouseover.
alt text

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

1 Solution

niketn
Legend

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

alt text
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
Explorer

Can this be done in simple XML without using CSS?

0 Karma

niketn
Legend

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

Brilliant - that has worked perfectly! Thanks a lot

0 Karma

niketn
Legend

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

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

cblanton
Communicator

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?

0 Karma

niketn
Legend

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

niketn
Legend

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

alt text
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
Path Finder

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.

0 Karma

niketn
Legend

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

niketn
Legend

@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!!!"
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 ...