topic Re: Timeline - Custom Visualization: How to hide the legend? in All Apps and Add-ons

Timeline - Custom Visualization: How to hide the legend?

Guitaraholis — Mon, 07 Nov 2016 15:57:11 GMT

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>

Re: Timeline - Custom Visualization: How to hide the legend?

dmaislin_splunk — Mon, 07 Nov 2016 17:04:19 GMT

Just use:

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

Re: Timeline - Custom Visualization: How to hide the legend?

Guitaraholis — Mon, 07 Nov 2016 19:30:01 GMT

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>

Re: Timeline - Custom Visualization: How to hide the legend?

cmerriman — Mon, 07 Nov 2016 21:15:17 GMT

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.

Re: Timeline - Custom Visualization: How to hide the legend?

Guitaraholis — Tue, 08 Nov 2016 09:24:38 GMT

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?

Re: Timeline - Custom Visualization: How to hide the legend?

robertlynch2020 — Fri, 24 Feb 2017 13:57:29 GMT

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

Re: Timeline - Custom Visualization: How to hide the legend?

Guitaraholis — Fri, 24 Feb 2017 14:00:15 GMT

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

Re: Timeline - Custom Visualization: How to hide the legend?

magnew_splunk — Tue, 28 Mar 2017 22:27:48 GMT

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.

Re: Timeline - Custom Visualization: How to hide the legend?

AKG1_old1 — Mon, 21 Aug 2017 09:35:17 GMT

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

Thanks
Ankit

Re: Timeline - Custom Visualization: How to hide the legend?

niketn — Mon, 21 Aug 2017 10:46:15 GMT

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

Re: Timeline - Custom Visualization: How to hide the legend?

AKG1_old1 — Mon, 21 Aug 2017 12:37:29 GMT

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

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

its not working 😞

Re: Timeline - Custom Visualization: How to hide the legend?

niketn — Mon, 21 Aug 2017 12:41:21 GMT

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.

Re: Timeline - Custom Visualization: How to hide the legend?

AKG1_old1 — Mon, 21 Aug 2017 12:59:08 GMT

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

Re: Timeline - Custom Visualization: How to hide the legend?

niketn — Mon, 21 Aug 2017 13:29:47 GMT

Glad it worked 🙂

Re: Timeline - Custom Visualization: How to hide the legend?

blablabla — Thu, 21 Dec 2023 09:21:32 GMT

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