Top margin incorrect

[drmrbrewer]

Take the following example:

https://jsfiddle.net/8wvkstxh/1/

The chart options include a y adjustment to the top xAxis labels, because, without it, the labels are too far from the axis itself (for my liking):

https://jsfiddle.net/8wvkstxh/2/

But with the y adjustment included (first example above), there is now a lot of dead space above the top x axis labels (I'm trying to create a chart layout which minimises dead margin space and maximises chart area, so I'm sensitive to this).

The top margin is seemingly "correct" for the default y position (without the y adjustment -- second example above), in that there is only a small gap between the labels and the edge.

But with the adjusted y position there is too much margin space.

It seems to me that the problem is that in order to set the y position to my liking (to move the labels down from their default position), I need a negative value for y.

But a negative y value actually should normally be pushing the labels up... so it seems that highcharts is thinking that more margin space will be required, and adds margin space to compensate for this, even though the labels are actually lower than without the negative adjustment (so that the opposite should have happened... the top margin should have been reduced, not increased).

Compare this with setting y explicitly to 0:

https://jsfiddle.net/sw36dqtp/

Therein lies the problem: setting y: 0 gives a very different result to not setting y at all. I need to set y to get the y position right, so I need to state a value, and I'm moving it up from y: 0 so I need to specify a negative value, which highcharts is apparently compensating for by adding more margin space which isn't needed. This leaves a lot of bloat in the top margin.

[pawelfus]

Thanks for reporting the issue @drmrbrewer

In this particular design, you can set xAxis.labels.reserveSpace to false, take a look: https://jsfiddle.net/BlackLabel/rw1eag2h/

Internal note:
It looks like a bug in padding correction:

highcharts/ts/parts/Axis.ts

Lines 6651 to 6671 in e62d541

	if (side === 0) {
	lineHeightCorrection = -axis.labelMetrics().h;
	} else if (side === 2) {
	lineHeightCorrection = axis.tickRotCorr.y;
	} else {
	lineHeightCorrection = 0;
	}
	// Find the padded label offset
	labelOffsetPadded = Math.abs(labelOffset) + titleMargin;
	if (labelOffset) {
	labelOffsetPadded -= lineHeightCorrection;
	labelOffsetPadded += directionFactor * (
	horiz ?
	pick(
	(labelOptions as any).y,
	axis.tickRotCorr.y + directionFactor * 8
	) :
	(labelOptions as any).x
	);
	}

In short: http://jsfiddle.net/BlackLabel/0ou3rfa4/ - both (top/bottom) spacings are set to zero, yet only bottom labels are close enough to the border.

[drmrbrewer]

Thanks, @pawelfus. Is the reserveSpace trick an exact fix in my particular example, or does it just reduce the impact? Because my feeling is that I still want to be "reserving space" for the x axis labels at the top, just not quite so much as is the case at present! So setting reserveSpace to false seems wrong, even if it helps.

I also find that there is still too much blank space for my use case. Take the following example, with title added:

https://jsfiddle.net/5tb1xmvk/1/

Because I am trying to use every last bit of space, I have even reduced the line-height of the title. But the gap between title and chart is still too big for my liking. So I need to add a margin-bottom:-0.8em; to reduce it:

https://jsfiddle.net/5tb1xmvk/

Is the extra blank space in the first example (even with reserveSpace set to false) a consequence of this same issue, or is it just something I have to accept and compensate for through negative margin? Because if I remove the y adjustment to the title (without any negative margin), the gap seems a bit more appropriate:

https://jsfiddle.net/9dLqxga1/

[pawelfus]

It's a direct fix @drmrbrewer - instead of reserving space for labels automatically, you control it. Note that labels nicely fit in the space created by tickmarks. You can reduce extra space above by setting spacingTop (defaults to 10px) and spacingBottom (defaults to 15px), demo: https://jsfiddle.net/BlackLabel/m9uyvszf/

Extra space, in your demos with titles, is caused by title.margin (defaults to 15px). You can disable it, see: https://jsfiddle.net/BlackLabel/f93bn8ck/ - no need to play around with negative adjustments and line-height.

[drmrbrewer]

labels nicely fit in the space created by tickmarks

@pawelfus aaah, I see. Yes, makes sense! Thanks.

Extra space, in your demos with titles, is caused by title.margin

ah yes, thanks... I really hated the negative margin kludge so I'm glad it's not necessary!

no need to play around with negative adjustments and line-height

but in my case I still need to reduce line-height because otherwise I find that the gap between title lines is too big, compare:

https://jsfiddle.net/p8z2476t/
https://jsfiddle.net/p8z2476t/1/

But this is really just particular to my use case where I'm trying to maximise actual chart size as far as possible.

[pawelfus]

I still need to reduce line-height because otherwise I find that the gap between title lines is too big, compare:

Ah, in that case, yes, line-height is a good idea :)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[drmrbrewer]

@pawelfus this issue was closed automatically but I don't see it as being completely resolved. I've been using the suggested solution, which has been working fine in general. Basically the solution was to set reserveSpace for the top xAxis labels to false, which seems to work only because some space is anyway being reserved for the ticks.

But now I'm in a situation where I want to make the format for the top axis labels customisable, so that I can no longer be sure how much space I need to reserve. Therefore, using the ticks to reserve space no longer works, but I also can't get the right amount of space to be reserved for the labels... or at least I can't adjust the y position of the labels without messing everything up.

Example: https://jsfiddle.net/y2pj7gmb/ (press Run multiple times to show the effect of different label height)

I have deliberately reduced tickLength so that it is insufficient to reserve enough space in any scenario.

[pawelfus]

Hey @drmrbrewer
Thank you for the update. In this case (customizable format), I agree you can't use reserveSpace = false and rely on ticks' created space. I have removed the code responsible for extra space, awaiting visual tests results (draft).

You can test this branch: <script src="https://github.highcharts.com/7ba376b/highcharts.js"></script>

Your demo without workarounds (negative title.offset and labels.y): https://jsfiddle.net/BlackLabel/7krvqmhx/