Configurable padding between axis title and label

[nicolaskruchten]

It'd be nice if I could specify a "minimum padding between label & axis title". with automargin, they end up looking a little too tight:

related: #2575

[nicolaskruchten]

Related #3607

[nicolaskruchten]

[etpinard]

data / layout?

[nicolaskruchten]

I think this could be in layout, either global or per-axis or both. Although I also think we could just bump the default a bit :)

[etpinard]

Here's a first attempt:

https://github.com/plotly/plotly.js/compare/axis-title-standoff

where a new axis attribute called title.standoff is added:

plotly.js/src/plots/cartesian/layout_attributes.js

Lines 65 to 79 in 423c91b

	standoff: {
	valType: 'number',
	role: 'info',
	min: 0,
	editType: 'ticks',
	description: [
	'Sets the standoff distance (in px) between the axis line and the title text',
	'The default value is a function of the axis tick labels, the title `font.size`',
	'and the axis `linewidth`.',
	'Note that the axis title position is always constrained within the margins,',
	'so the actual standoff distance is always less than the set or default value.',
	'By setting `standoff` and turning on `automargin`, plotly.js will push the',
	'margins to fit the axis title at given standoff distance.'
	].join(' ')
	},

It essentially exposes a way to override this computation:

plotly.js/src/plots/cartesian/axes.js

Lines 2708 to 2714 in 25fe1c9

	var titleStandoff;
	if(ax.type === 'multicategory') {
	titleStandoff = ax._depth;
	} else {
	var offsetBase = 1.5;
	titleStandoff = 10 + fontSize * offsetBase + (ax.linewidth ? ax.linewidth - 1 : 0);
	}

---

A few notes:

• We could also call it title.offset, but I wouldn't want to call it title.pad as I think we should start standardising pad attributes to always be objects with keys l, t, r and b.
• In this first attempt, the "standoff" value does not correspond to the white space the tick labels and the axis title. Instead, it is the distance between the axis line and axis title. This way we don't have to compute the (costly) tick labels bounding boxes whenever title.standoff is set.

[nicolaskruchten]

Can this solution still guarantee that the axis title will not overlap with the tick labels?

[nicolaskruchten]

This way we don't have to compute the (costly) tick labels bounding boxes whenever title.standoff is set.

But we do do those computations when it isn't set? I'm confused. I was really expecting this to be a padding type thing around the title, even if we want to do the t/b/l/r thing...

[etpinard]

Can this solution still guarantee that the axis title will not overlap with the tick labels?

yes.

But we do do those computations when it isn't set?

We compute the axis bounding boxes when:

• automargin: true or
• type: 'multicategory'
• has a visible range slider

otherwise we don't.

[etpinard]

I'm confused.

See example:

• https://github.com/plotly/plotly.js/blob/423c91b8925a017dcad2f0d0682ccd92967ee127/test/image/mocks/automargin-title-standoff.json
• https://github.com/plotly/plotly.js/blob/423c91b8925a017dcad2f0d0682ccd92967ee127/test/image/baselines/automargin-title-standoff.png

[nicolaskruchten]

OK, so the type of case that we'd like to address in this issue is this sort of thing: https://codepen.io/nicolaskruchten/pen/GRRpNjw?editors=0010 I'm not sure how the standoff is helping add spacing between the x axis title and the ticklabel here?

[etpinard]

Here's one (not great) way: https://codepen.io/etpinard/pen/vYYNyJV?editors=0010

[nicolaskruchten]

I agree this is "not great"... The goal for this issue is something that "just works" (including in automargin mode) without having to manually tweak the standoff per chart depending on the length and orientation of the tick labels :)