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?

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