CODEWITHSUNDEEP
javascripthighcharts
Ian
Ian

Reputation: 590

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 :)

Upvotes: 1

Views: 701

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

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/5443

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

Best regards.

Upvotes: 1

Related Questions