Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
How to make Legend's Position Fixed While Floating Above the Chart
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!
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.
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.
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,
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.
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.
Thank you for the tip. Will consider that.
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:
Thank you in advance!
I'll answer in that thread