Solved: How to hide some unwanted fields in my chart's leg...

altink · ‎08-25-2017

Dear support

by your precious help I have managed to hide an unwanted field in my chart's legend.
Answer 563890:
hide-unused-chart-legend-item

The method proposed was using Simple XML extension for hiding a certain selected item - nth-child(x),
where x=2 in this case, see code below:

       <html depends="$alwaysHideCSSStyle$">
         <style>
           g.highcharts-legend-item:nth-child(2)
           {
               visibility: hidden !important;
           }
         </style>
       </html>

So by implementing the code above inside "panel" tags - I can hide any legend item I want.

The problem consists in the fact that the action above is performed on every chart dashboard of my form!
I have no configured with nth-child(x) the other dashboards - because I do not need to hide anything there.
And even if I configure another Dashboard with its own "g.highcharts-legend-item:nth-child(x)", only the first declaration of nth-child(x) is considered and thus:
The X-the item is hidden in every chart on my form.

The way above the very elegant solution given in Answer 563890 could be used in forms that have a single chart only, not when more.

Any idea on how to overcome/workaround this?

best regards
Altin

PS. I searched splunk and highcharts docs and forums, but couldn't find anything for "highchart legend item nth child"
I would be happy to read some doc on highcharts - especially for the issue I have

rjthibod · ‎08-25-2017

You need to scope it down to a specific HTML ID.

Give the chart an HTML ID, e.g., <chart id="myChart">, and then update the CSS to target the specific ID.

Try this,

<html depends="$alwaysHideCSSStyle$">
  <style>
    #myChart g.highcharts-legend-item:nth-child(2) {
      visibility: hidden !important;
    }
  </style>
</html>

or try this,

<html depends="$alwaysHideCSSStyle$">
  <style>
    #myChart > g.highcharts-legend-item:nth-child(2) {
      visibility: hidden !important;
    }
  </style>
</html>

View solution in original post

altink · ‎08-25-2017

thank you very much for the exact solution.

however one thing remains:
can you indicate some resources on the HighCharts - I mean Splunk related only?

best regards
Altin

rjthibod · ‎08-25-2017

You need to scope it down to a specific HTML ID.

Give the chart an HTML ID, e.g., <chart id="myChart">, and then update the CSS to target the specific ID.

Try this,

<html depends="$alwaysHideCSSStyle$">
  <style>
    #myChart g.highcharts-legend-item:nth-child(2) {
      visibility: hidden !important;
    }
  </style>
</html>

or try this,

<html depends="$alwaysHideCSSStyle$">
  <style>
    #myChart > g.highcharts-legend-item:nth-child(2) {
      visibility: hidden !important;
    }
  </style>
</html>

altink · ‎08-25-2017

To further clarify (after more testing)

The first "#myChart g.highcharts........" - arrow char (>) excluded - is OK and did resolve my question.

The second "#myChart > g.highcharts........" - arrow char (>) included - does not work - fields does show in legend.
My Splunk is 6.5.2.

thanks and regards
Altin

rjthibod · ‎08-25-2017

Not surprised the second didn't work, but figured I'd put it in there just in case.

altink · ‎08-26-2017

thank you very much rjthibod

How to hide some unwanted fields in my chart's legend on this dashboards but not all of them?

Welcome to the Splunk Community!

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Adoption of RUM and APM at Splunk