How to make Legend's Position Fixed While Floating Above the Chart

Hi,

Is there a way I can make a legend float over it’s respective chart but stays in the same position so when the charts is scrolled, the legend stay at the front and is not dragged by the chart?

Thank you in advance!

Best regards,
Adrian

I’m not sure how to reproduce the chart scrolling while the legend is shown. Could you provide a simple example to reproduce the behavior? If it can be reproduced in a chart in
the demo
a link is ok too.

Regards,

Guille

Hi Guille,

My scenario is something like when the chart is contained in a DIV and the chart grew longer, the DIV will automatically generate a scrollbar so you can scroll your chart (left-right or up-down) but the floating legend gets scrolled along with the chart. Please see the attached screenshots.

Thank you for your time.

Best regards,
Adrian
26053.png
26054.png

Hi Adrian,

Now I clearly get the issue now, but can’t think of any chart configuration to change legend position to something not fixed.

If your xAxis is timebased one option would be to enable timeline for the chart:

see timeline docs


see timeline demo

After that you’d need to enable the legend. You can mix different series type in timeline mode and even disable the navigator or range selector if needed.

Another option would be to hide the chart built-in legend and have a “custom made” legend using a label outside your div with scroll.

Last thing I can think that might help in the situation, but not solve it, is to have a shared tooltip with the color references so that the user knows what each series color mean while hovering.

Hope this helps,

Guille

Hi Guillermo,

Thank you for your input. I resorted to using the Zoom feature of the chart so that I don’t have to worry how to set the legend’s position to fixed. I got rid the scroll gesture and replace it with zoom.

Best regards,
Adrian

Glad to hear that you found a solution. If you’re using zoom remember that minRange property might be useful to set the zoom limit.

Regards

Hi Guillermo,

Thank you for the tip. Will consider that.

Best regards,
Adrian

Hi Guillermo,

I think your worry has come true. I am now facing some issues on the charts where column data when positioned at the leftmost (or sometimes at the rightmost), is not shown. Please see the following post:

https://vaadin.com/forum#!/thread/13440311/13440310

Thank you in advance!

Best regards,
Adrian

I’ll answer in that thread