# Position Y-axis Labels inside Bar Chart

**URL:** <https://community.plotly.com/t/position-y-axis-labels-inside-bar-chart/32475>\
**Category:** plotly.js\
**Created:** [December 11, 2019, 9:25pm UTC](https://community.plotly.com/t/position-y-axis-labels-inside-bar-chart/32475 "2019-12-11T21:25:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rknowles](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rknowles](https://community.plotly.com/u/rknowles)\
**Post date:** [December 11, 2019, 9:25pm UTC](https://community.plotly.com/t/position-y-axis-labels-inside-bar-chart/32475/1 "2019-12-11T21:25:38Z")

</div>

Here’s what my bar chart looks like currently:  
 ![2](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/1/17a89a2f661b1c7a48b19c28ed94cfc898488a99.png)

The filenames are y-axis labels. The goal is to move the filenames over the bars like so:  
 ![1](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/7/7f46341e1cfacde57912bf0799e97156f2b95118.png)

How do I do that?

Thanks.

---

<div class="post-metadata">

**Author:** ![Emmanuelle](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emmanuelle/32/7853_2.png) [@Emmanuelle](https://community.plotly.com/u/Emmanuelle)\
**Post date:** [December 12, 2019, 3:58am UTC](https://community.plotly.com/t/position-y-axis-labels-inside-bar-chart/32475/2 "2019-12-12T03:58:14Z")

</div>

Could you use annotations instead of y labels? (see [https://plot.ly/javascript/text-and-annotations/](https://plot.ly/javascript/text-and-annotations/) for Javascript, [https://plot.ly/python/text-and-annotations/#simple-annotation](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.

---

<div class="post-metadata">

**Author:** ![rknowles](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rknowles](https://community.plotly.com/u/rknowles)\
**Post date:** [December 12, 2019, 5:20pm UTC](https://community.plotly.com/t/position-y-axis-labels-inside-bar-chart/32475/3 "2019-12-12T17:20:06Z")

</div>

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:

```auto
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/0/0c6b58c5b70fb6bcdd9dc7ef27bcf03ce7729f22.png)