All Apps and Add-ons

Timeline - Custom Visualization: How to hide the legend?

Guitaraholis
Explorer

I'm incorporating the Timeline - Custom Visualization into a dashboard for a custom app. The legend on the right causes the panel to scroll for a long time (due to us charting multiple events). Is there an option i can specify which would 'hide' the legend without needing a CSS type hack to remove it?

Almost something like :

    <option name="timeline_app.timeline.legend">none</option>
1 Solution

Guitaraholis
Explorer

i ended up doing it with custom css styling to 'hide' it and then limit force the width of the panel to fit... hopefully something that gets added to it in time

View solution in original post

magnew_splunk
Splunk Employee
Splunk Employee

Hi @Guitaraholis,

I just came across your question. We don't currently support this scenario in Timeline, but we are looking at supplying more options for legends in an upcoming release.

Thank you for the feedback.

Guitaraholis
Explorer

i ended up doing it with custom css styling to 'hide' it and then limit force the width of the panel to fit... hopefully something that gets added to it in time

AKG1_old1
Builder

Hi, I am looking for same thing. it will be great help if you can guide how to do it with css ?

Thanks
Ankit

0 Karma

niketn
Legend

@agoyal, Timeline app uses legend class for displaying/styling Legends

You can add ID/s to Timeline Panel

<viz type="timeline_app.timeline" id="timeline1">

And you can use CSS Style similar to the following to hide legends:

<html depends="$alwaysHideCSSStyleHTML$"
    <style>
       #timeline1 .legend{
             visibility:hidden !important;
       }
    </style>
</html>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

blablabla
Path Finder

Thanks! If I could, I would give you 10 Karma for this solution. It makes the panel so much nicer

0 Karma

AKG1_old1
Builder

@niketnilay : Thanks, I have added this css in .css file which is included in dashboard.

.timeline1.legend{
 visibility:hidden !important;
}

its not working 😞

0 Karma

niketn
Legend

Have you added id="timeline1" to your timeline chart?

Otherwise you can remove .timeline1 from the CSS to see if Legend gets removed.

Not sure if this is applicable in this case but try refreshing/restarting Splunk and clearning up Chrome Browser history, in case you are receiving cached output.

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

AKG1_old1
Builder

@niketnilay: You are always a savior for me. Clearing chrome's browser history worked for me. 🙂

0 Karma

niketn
Legend

Glad it worked 🙂

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

dmaislin_splunk
Splunk Employee
Splunk Employee

Just use:

<option name="charting.legend.placement">none</option>

Guitaraholis
Explorer

Its a custom vizualisation app from splunkbase .... uses the directive so chart options don't work with it...

  <viz type="timeline_app.timeline">
    <search>
<--  SNIP -->
        </search>
    <option name="height">189</option>
    <option name="timeline_app.timeline.axisTimeFormat">MINUTES</option>
    <option name="timeline_app.timeline.colorMode">categorical</option>
    <option name="timeline_app.timeline.legend">none</option>
    <option name="timeline_app.timeline.legend.placement">none</option>
    <option name="timeline_app.timeline.maxColor">#DA5C5C</option>
    <option name="timeline_app.timeline.minColor">#FFE8E8</option>
    <option name="timeline_app.timeline.numOfBins">6</option>
    <option name="timeline_app.timeline.tooltipTimeFormat">MINUTES</option>
    <option name="timeline_app.timeline.useColors">1</option>
    <option name="height">400</option>
  </viz>
0 Karma

cmerriman
Super Champion

http://docs.splunk.com/Documentation/Timeline/1.1.0/TimelineViz/TimelineXML

I don't use this app, but I don't see anything in the docs about hiding the legend.

0 Karma

Guitaraholis
Explorer

Yea nothing in the docs... so was asking if anyone knew a way of hiding the legend, say, with JS considering it is a D3js visualisation or if anyone has done anything similar before?

0 Karma

robertlynch2020
Motivator

did you get a soution to this, i have the same issue?

0 Karma
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Watch Now!   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to leverage ...

More Control Over Your Monitoring Costs with Archived Metrics!

What if there was a way you could keep all the metrics data you need while saving on storage costs?This is now ...

New in Observability Cloud - Explicit Bucket Histograms

Splunk introduces native support for histograms as a metric data type within Observability Cloud with Explicit ...