topic Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown in Splunk Search

Can I Disable Chart Legend Drilldown - Keep Chart Cell Drilldown?

Ant1D — Thu, 08 Jun 2023 22:14:18 GMT

Hi,

I have asked a similar question already but have not had an answer so I thought I would try again because I believe an answer to this issue could be useful to many users.

The title says it all. We can drilldown on data from charts by clicking on a chart cell or by clicking on a chart legend. I want to keep the former (chart cell drilldown) whilst not being able to do the latter (chart legend drilldown). Is this possible?

An answer to this would be a big winner.

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

jleduc — Tue, 22 Jan 2013 09:24:23 GMT

According to my knowledge of Highcharts, which is Splunk JS chart underlying graph library, clicking on the legend or the chart is controlled by the same property.

So Highcharts cannot dissociate the 2 elements and therefore JS chart cannot defines different actions for legend and chart.

I have no idea about FLashchart.

In JS chart you could still have a graph with no legend with drilldown enabled and a masterlegend with no graph in another panel, with drilldown disabled, this should work, but I do not know it it fits in your needs.

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

rjthibod — Tue, 18 Apr 2017 13:52:10 GMT

Resurrecting an old question but an important one for app developers.

The answer is it depends.

In 6.0 to 6.2, you can only really do this with custom JS extensions to SimpleXML. There is no built-in way to do it using only SimpleXML. Assume you have a chart with the id top_users. In JS, you use two event listeners to bypass the legend drilldown by only paying attention to the chart drilldown event. The code pattern looks like this:

...
var chart_top_users = mvc.Components.getInstance("top_users");
chart_top_users.on("click", function(e) {
   e.preventDefault();
});
chart_top_users.on("click:chart", function(e) {
  // ... Do your chart drilldown actions ...
});

In Splunk 6.3 and newer, you can use the new functionality in SimpleXML and the condition elements to spy on the presence of the row._span field for time-based charts. For non time-based charts, I don't think there is a solution, but it is a little hard to see where there is much of a difference between the legend and the rows. Anyway, returning to the code, the corresponding SimpleXML to spy on the row._span field would look like this.

<chart id="top_users">
  <search><query> ... .</query></search>
  <option name="charting.drilldown">all</option>
  <drilldown target="_blank">
    <condition match="isnotnull('row._span')">
      <!-- Insert your chart drilldown logic ... -->
    </condition>
    <condition></condition> 
  </drilldown>
</chart>

If all else fails in SimpleXML, you can always use the SplunkJS approach. It is supported in all versions of Splunk 6.X.

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

Ant1D — Thu, 18 May 2017 15:53:55 GMT

I am not sure if the SimpleXML method would work.

According to the documentation here when it comes to drilldowns, the only attribute available for the tag is field. The match attribute is only available for inputs

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

rjthibod — Thu, 18 May 2017 15:57:10 GMT

I promise you this works. It is in my apps running on 6.4 - 6.6.

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

mrccasi — Wed, 04 Apr 2018 07:32:53 GMT

hi - how did you make it work? i am struggling on legend as well. thanks!

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

rjthibod — Sat, 07 Apr 2018 10:57:52 GMT

I make it work using the methods I posted in the answer.

If you are doing a Splunk search like timechart or chart that produces a hidden row called _span, then you can use the SimpleXML method I posted in the second part of my answer. You can also download my app (Layer8Insight App for Splunk, https://splunkbase.splunk.com/app/3171/) and see the many places in XML where I use this method, such as the example below. The first condition triggers when the user clicks a series in the chart (not legend) and not labelled "OTHER'. The second condition is triggered if the user clicks "OTHER" in the chart (not legend), and the final empty <condition> that does nothing will be hit if the user clicks on the legend.

This app works on 6.4 and newer, so it does work for current versions of Splunk.

        <drilldown>
          <condition match="isnotnull('row._span') AND 'click.name2' != &quot;OTHER&quot;">
            <eval token="form.dd_time.earliest">$earliest$ - 2*$row._span$</eval>
            <set token="form.dd_time.latest">$latest$</set>
            <set token="form.dd_filter_target_value">$click.name2$</set>
            <set token="set_dd_enabled">true</set>
          </condition>
          <condition match="isnotnull('row._span')">
            <eval token="form.dd_time.earliest">$earliest$ - 2*$row._span$</eval>
            <set token="form.dd_time.latest">$latest$</set>
            <set token="form.dd_filter_target_value">*</set>
            <set token="set_dd_enabled">true</set>
          </condition>
          <condition></condition>
        </drilldown>

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

paramagurukarth — Mon, 09 Apr 2018 07:57:59 GMT

Add the below row to your dashboards to disable drill-downs on legends

<row id="hidden_row">
    <panel>
        <html>
            <style>
                .highcharts-legend-item:active {
                    pointer-events: none !important;
                }
                #hidden_row{
                     display:none !important;
                }
             </style>
         </html>
    </panel>
</row>

Above one is a per dashboard solution. If you want to disable legend-drilldown in all your dashboards..
add a dashboard.css to your apps /appserver/static/ path and add just the below css definition to that file..

.highcharts-legend-item:active {
    pointer-events: none !important;
}

If you want to apply this for a specify pane, set ID for that panel and use that ID i your CSS selector like below..

<panel id="my_panel_id">
     <!-- Your chart definition here -->
....
#my_panel_id .highcharts-legend-item:active {
        pointer-events: none !important;
    }

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

mrccasi — Thu, 10 May 2018 06:11:39 GMT

Hi - how about if only a particular chart in a dashboard i want to disable the legend? thank you.

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

rjthibod — Thu, 10 May 2018 10:18:31 GMT

My answer above works for particular charts.

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

paramagurukarth — Thu, 10 May 2018 10:33:25 GMT

Add ID attribute to your chart/panel and then you can select like

#given_panel_id .highcharts-legend-item:active {
     pointer-events: none !important;
 }

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

mrccasi — Fri, 11 May 2018 02:00:33 GMT

hi rjthibod - thanks but it does not work for me since i have a scatter chart which is kinda have a messy click.values.

thanks for sharing paramagurukarthikeyan! hope it works.

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

mrccasi — Fri, 11 May 2018 02:03:49 GMT

it works thanks for your help paramagurukarthikeyan 🙂

Re: Disable Chart Legend Drilldown - Keep Chart Cell Drilldown

rrossetti — Thu, 08 Jun 2023 19:24:58 GMT

This css selector did not work for me using simple xml dashboard currently, but what did work is using this:

/* Disable legend mouse cursor on hover*/

.highcharts-a11y-proxy-button:hover {

cursor: default !important;

}

/* disable clicks*/

.highcharts-a11y-proxy-button:active {

pointer-events: none !important;

}