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

[etpinard]

All right, let's compute those bounding boxes then. I'm glad I asked.

[nicolaskruchten]

Me too :) sorry the original issue was not clear

[pdfabbro]

standoff doesn't seem to do anythign for me no matter what I set it to and yes I have automargin set. Was this ever implemented? The documentation has it so I assume it's in there.

[nicolaskruchten]

Yes, this was implemented and generally works for me... Can you provide a CodePen showing what's not working for you?

[pdfabbro]

Hmmm, I'm not too sure how to throw this into a codepen, but basically I have a bar chart that is 300px high with really long labels. So I set the automargin to true and the labels adjusted and looked better but they are really close to the x-axis label. I just wanted to offset the axis label by about 10-20px from the end of the tick labels. Here is my layout object:

{
// eslint-disable-next-line camelcase
plot_bgcolor: "white",
// eslint-disable-next-line camelcase
paper_bgcolor: "white",
height: 300,
margin: {
t: 30,
pad: 5
},
hovermode: "closest",
hoverlabel: {
align: constants.SELECTED_VEHICLE_SUMMARY_HOVER_TEXT_ALIGN
},
title: {
text: languageData.highFuelEconomyChartTitle
},
xaxis: {
title: {
text: languageData.fuelEconomyChartsXAxisTitle,
standoff: 150
},
fixedrange: true,
automargin: true
},
yaxis: {
title: {
text: languageData.fuelEconomyChartsYAxisTitle
},
fixedrange: true
}
};

[etpinard]

I have a bar chart that is 300px high

I suspect that your "really" long x-axis labels are longer than half of the graph's height. If that's the case, we ignore them in the auto-margin computations.

I'd recommend trying to increase your graph's layout.height to get xaxis.title.standoff to work.

For more info, please refer to #4350 and #4299.

[nicolaskruchten]

I just wanted to offset the axis label

Note also that title.standoff controls the distance between the axis title and the axis labels, not the axis labels and the axis :)

[pdfabbro]

@nicolaskruchten yup, understood, that's what I wanted to do. @etpinard - good to know. I had a feeling something like that may be occurring so I set the height to 700px and it still didn't work, but I may not have been using standoff properly at that time. I'll try again at 700px and let you know if I see any change.

[pdfabbro]

I've tried again with a height of 700px with no luck (only changes the size of the suplot). I changed the tick labels to be short and therefore go horizontally instead of on an angle and still can't seem to change the location of the x-axis label.

Thanks for the responses, not sure what I'm doing wrong here, but I'll just have to live with the default for now I guess.

[pdfabbro]

Just thought of something, I'm using this in my package.json. Perhaps my version is too old?

"plotly.js-basic-dist": "^1.49.4"

[pdfabbro]

Yup, that was the problem - you need to use the package that actually has the code lol... sorry about that, thanks for the replies!

[mfouesneau]

Was this propagated to coloraxes?