Position Y-axis Labels inside Bar Chart

plotly.js
1

Here’s what my bar chart looks like currently:
2

The filenames are y-axis labels. The goal is to move the filenames over the bars like so:
1

How do I do that?

Thanks.

2

Could you use annotations instead of y labels? (see https://plot.ly/javascript/text-and-annotations/ for Javascript, https://plot.ly/python/text-and-annotations/#simple-annotation for Python). You can use the x, xref and xanchor parameters of annotations to control the position of the labels.

3

Not sure if this is the best way to do it or not… but after plotting the chart, I’m binding a function to the plotly_afterplot that gets the existing x,y coordinates of each text element and then adjusts them like so:

const afterPlot = () => {
	$('g.ytick text').each((index, element) => {
		let x = parseInt($(element).attr('x'));
		let y = parseInt($(element).attr('y'));

		$(element)
			.attr('text-anchor', 'middle')
			.attr('x', x + 250) // half of div width
			.attr('y', y - 30); // half of plotly padding
	});
};

plot.on('plotly_afterplot', afterPlot);

End result:

image