Enhance legend positioning
Now legend positioning is automtical and "horizontal first". I.e. when ALIGN:LEFT, legend space reserved on the left firstly and secondly I can vertically align the legend. Only center-aligned legend can be placed at bottom or top of plot area.
But my designer want to have left-aligned legend at bottom.
So it seems good idea to add legend option like
position:={top|bottom|left|right} to specify where the legend space is reserved, and use existing align/verticalAlign options to align legend inside legend area. May be ignore verticalAlign property for top/bottom position (not sure) but apply both alignment for left/right legend.
e-kinst
shared this idea
See https://github.com/highslide-software/highcharts.com/issues/3499. We have implemented this so that the layout option of the legend decides what side of the chart it should be displayed at.
-
e-kinst
commented
Thank your very much for your efforts. It works very nice! Most problems become fixed. Unfortunately not my one - I still can't satisfy my designer because he wanted left-aligned vertical legend layout with legend space at the bottom of chart.
But I consider your aproach much better than I supposed - no extra parameters needed. And nobody can satisfy all designers' wishes (with reasonable efforts (:-)) )
Thank you once more and best regards,
e-kinst -
David Coblentz
commented
I'm having the same problem as well. I think it can be fixed with something like this:
horizontal = legendOptions.layout === 'horizontal';
// Adjust for legend
if (legend.display && !legendOptions.floating) {
if (align === 'right' && !horizontal) { // horizontal alignment handled first
if (!defined(margin[1])) {
chart.marginRight = mathMax(
chart.marginRight,
legend.legendWidth - legendX + legendMargin + spacing[1]
);
}
} else if (align === 'left' && !horizontal) {
if (!defined(margin[3])) {
chart.plotLeft = mathMax(
chart.plotLeft,
legend.legendWidth + legendX + legendMargin + spacing[3]
);
}} else if (verticalAlign === 'top' && (horizontal || align === 'center')) {
if (!defined(margin[0])) {
chart.plotTop = mathMax(
chart.plotTop,
legend.legendHeight + legendY + legendMargin + spacing[0]
);
}} else if (verticalAlign === 'bottom' && (horizontal || align === 'center')) {
if (!defined(margin[2])) {
chart.marginBottom = mathMax(
chart.marginBottom,
legend.legendHeight - legendY + legendMargin + spacing[2]
);
}
}
}This shouldn't change the behavior for cases where the legend layout it vertical. For horizontal layouts, it allows verticalAlign of top and bottom with the align set to left, right, or center. If the layout is horizontal, and verticalAlign is middle, the legend will render on top of the chart, similar to the way that it would now for a horizontal layout, with a verticalAlign of middle and align of center.
-
Yes I agree there is something missing here. We should be able to position the legend below the chart, left aligned. The offending logic is in Chart.getMargins method.