Ian Ian - 5 months ago 113
Javascript Question

Highcharts - Positioning the legend (left and right/x and y)

My Highcharts solutions give the user the option to control which series are showed at any one point. Because of the amount of series available, I am extending the functionality to checkboxes rather than just add them all on initiation and hide the majority initially as this would make the legend huge.

I would like to overlay a button on the chart to make it look integrated. This gives no problems in itself as I can give a negative value to

legend.x
to move it to make room for the button. However, this then poses a problem when more series are programmatically added, as the legend maintains its original width and I lose some options off to the side when there are too many.

This is a stripped down fiddle of my problem: https://jsfiddle.net/paLoxcy3/. This is a relevant snippet:

legend: {
align: "right",
x: -100
}


It's worth adding here the graph needs to maintain a responsive width, hence I cannot just add a
width
. As an aside, were I do to this (and indeed when the series names do eventually drop a line in my current fiddle), they then become left aligned which is not desired.

I've had a good play around with the options of
legend
but at this point assume the only solution to effectively add
padding-right
to the legend holder is to use
chart.events.load
and
chart.events.redraw
to somehow do it manually? It's a bit annoying as the options to add
marginTop
and
marginBottom
exist but not
marginLeft
and
marginRight
.

Any help much appreciated! Shortcut to docs is here to save some time :)

Answer

I think that this problem is connected with small issue in Highcharts legend.renderItem function. As a workaround you can change if statement responsible for moving item to another line. Here you can see how this statement looks in code:

// if the item exceeds the width, start a new line
        if (horizontal && legend.itemX - initialItemX + itemWidth >
                (widthOption || (chart.chartWidth - 2 * padding - initialItemX - options.x))) {
            legend.itemX = initialItemX;
            legend.itemY += itemMarginTop + legend.lastLineHeight + itemMarginBottom;
            legend.lastLineHeight = 0; // reset for next line (#915, #3976)
        }

And Here you can see how I have changed this statement:

  // if the item exceeds the width, start a new line
        if (horizontal && legend.itemX - initialItemX + itemWidth >
                (widthOption || (chart.chartWidth - 2 * padding - initialItemX - ((options.align === 'right') ? (-options.x) : options.x)))) {
            legend.itemX = initialItemX;
            legend.itemY += itemMarginTop + legend.lastLineHeight + itemMarginBottom;
            legend.lastLineHeight = 0; // reset for next line (#915, #3976)
        }

Here you can find github topic connected with this issue: https://github.com/highcharts/highcharts/issues

And here you can see chart with my workaround: https://jsfiddle.net/paLoxcy3/2/

Best regards.