✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Position Y-axis Labels inside Bar Chart

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.

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.

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