Add button to legend and reposition after redraw

[asryan]

This is a two part question:

1 - I'm trying to add a button to the right of my legend, to show/hide (some) legend items. I'm struggling to position the item, its much more difficult than positioning an item inside the chart area, it's position doesn't seem to be quite as accessible. Is it possible to add margin to the legend box only on the right, to leave space for my button? I see a `margin` property, but it doesn't look like it's customizable per side.

2 - As I show&hide legend items, I need to reposition the button after redraw is called on the chart. I'm currently using the `redraw` event to try and do that, but that event seems to be fired at the start of the redraw, not after the animation has completed, so I no long have the updated position of the legend. Is there any sort of event that fires when redraw has been completed? Or should I do some sort of `setTimeout`?

Here's a jsfiddle with what I'm trying to do:

https://jsfiddle.net/dvxz56sw/4/

[mateusz.b]

Hello,

Thanks for contacting us with your questions.

1) Currently there is no API property that allows you to change the right margin of the legend. However, to achieve your goal, you can slightly change legend render method, adding a custom marginRight property. Please check the demo I have just prepared for you, especially lines 122, 235: https://jsfiddle.net/BlackLabel/akfxgjmb/

When it comes to the legend.margin API property, its worth noting that it can only change the space between the legend and the axis labels or plot area, so it behave more like a margin top.
API reference: https://api.highcharts.com/highcharts/legend.margin

2) While your approach with setTimeout is absolutelly correct, to position your button you could use other properties, which are ready and accessible even before redraw event. As a result you dont have to use setTimeout.
Demo: https://jsfiddle.net/BlackLabel/ka9q62t3/

If you have any further questions, feel free to contact us again.
Best regards!

[asryan]

Thank you, this is fantastic - reimplementing render here feels like a maintenance nightmare since this will probably live for years, so I'll probably leave it and hope the button doesn't overlap a legend item.

[mateusz.b]

Glad to hear the solution is working for you! If you are concerned about overlaping legend items with button, you could try to slighly reduce legend width e.g to 70%, and move button outside legend box: https://jsfiddle.net/BlackLabel/6q0429hb/
Something like this should cover most cases, but feel free to experiment with different properties.

Best regards!