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>
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
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.
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
Hi, I am looking for same thing. it will be great help if you can guide how to do it with css ?
Thanks
Ankit
@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>
Thanks! If I could, I would give you 10 Karma for this solution. It makes the panel so much nicer
@niketnilay : Thanks, I have added this css in .css file which is included in dashboard.
.timeline1.legend{
visibility:hidden !important;
}
its not working 😞
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.
@niketnilay: You are always a savior for me. Clearing chrome's browser history worked for me. 🙂
Glad it worked 🙂
Just use:
<option name="charting.legend.placement">none</option>
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>
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.
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?
did you get a soution to this, i have the same issue?