Big right spacing causes part of legend to be clipped.

[KacperMadej]

Expected behaviour

Legend fits in chart.

Actual behaviour

Legend is clipped on left side.

Live demo with steps to reproduce

https://jsfiddle.net/4be6gddy/
(in Win/Chrome clipping is bigger and first items for each legend rows are not visible

)

[pawelfus]

@TorsteinHonsi - how should we resolve that issue? I see two possible solutions:

• according to the docs we should apply spacings when calculating width of the legend here. However, this will change how legend is rendered and some of the tests will fail. For example:
  

• change aligning box here, so we align it to the correct bounding box

[TorsteinHonsi]

I think the first solution - it should be something like:

if (horizontal && legend.itemX - initialItemX + itemWidth >
				(widthOption || (chart.spacingBox.width - 2 * padding - initialItemX - options.x))) {

But then I don't understand why it wraps in the test you picture above. The alignment to spacingBox looks correct to me.

[pawelfus]

I agree, the alignment to spacingBox is correct, so I would do the same fix as yours. Now just simply build and run test 2104,2181 in the test suite and you will see the legend in two rows. I am worried that many users will come and report this as a bug. It can change drastically how chart is rendered, not always though (in our tests it is ~3 failing tests because of this change).

[TorsteinHonsi]

Yes I saw the same - but it shouldn't happen because it is well within the spacing box even with one row. I'll check some more.