# Make The Bar Chart Text Go Down A Line

**URL:** <https://community.plotly.com/t/make-the-bar-chart-text-go-down-a-line/62631>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [April 2, 2022, 12:27pm UTC](https://community.plotly.com/t/make-the-bar-chart-text-go-down-a-line/62631 "2022-04-02T12:27:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/matan/32/20091_2.png) [@Matan](https://community.plotly.com/u/Matan)\
**Post date:** [April 2, 2022, 12:27pm UTC](https://community.plotly.com/t/make-the-bar-chart-text-go-down-a-line/62631/1 "2022-04-02T12:27:38Z")

</div>

I have the next graph:  
 ![Screenshot 2022-04-02 151808](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/a/ea0b597b4bb6b0ed0b7e3e563c0df312a81f6bd3.png)  
Example:  
VODKA 80 PROOF - will become  
VODKA  
80  
PROOF  
I would like the have each word on its own line one under another.  
I can’t find anything on the internet, tried playing a bit with the CSS but couldn’t figure it out.

---

<div class="post-metadata">

**Author:** ![SamuelVT](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/samuelvt/32/20818_2.png) [@SamuelVT](https://community.plotly.com/u/SamuelVT)\
**Post date:** [April 2, 2022, 5:05pm UTC](https://community.plotly.com/t/make-the-bar-chart-text-go-down-a-line/62631/2 "2022-04-02T17:05:00Z")

</div>

Hello @Matan

It seems that there is still no solution, please take a look at this thread.

> <https://github.com/plotly/plotly.js/issues/382>
>
> Is there an option to reflow long text labels?
> \- For example, a long label witho…ut reflow (plotly tries to autocorrect by slanting the labels instead of reflowing the text, but it still doesn't fit)
> !\[plotlylonglabels1\](https://cloud.githubusercontent.com/assets/12956286/14210826/74d2cb16-f833-11e5-8def-3d12e4c01010.PNG)
> \- And a simple manual fix with a few \`\<br\>\` in the code that I'd like to have Plotly be able to do with a simple \`wrap: true\` option
> !\[plotlylonglabels2\](https://cloud.githubusercontent.com/assets/12956286/14210809/595b5754-f833-11e5-8f6a-0c80e7619a1e.PNG)
> 
> JS code for this chart
> 
> \`\`\`
> var data = \[{
> // first screenshot labels
> //x: \['giraffes', 'orangutans', "Very Long Text Label That Doesn't Fit Properly"\],
> // second screenshot labels
> x: \['giraffes', 'orangutans', "Very Long\<br\>Text Label That\<br\>Doesn't Fit\<br\>Properly"\],
> y: \[20, 14, 23\],
> type: 'bar'
> }\]
> Plotly.newPlot('PlotlyDivSimple', data, {})
> \`\`\`

---

<div class="post-metadata">

**Author:** ![Matan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/matan/32/20091_2.png) [@Matan](https://community.plotly.com/u/Matan)\
**Post date:** [April 2, 2022, 5:08pm UTC](https://community.plotly.com/t/make-the-bar-chart-text-go-down-a-line/62631/3 "2022-04-02T17:08:24Z")

</div>

hmm…  
It’s been 6 years, I will leave the question open hoping maybe someone has an answer,  
but I gotta say it’s actually a pretty important option to have so hopefully someone from the dash development team will see this post and maybe look into it. 🙂

---

<div class="post-metadata">

**Author:** ![atharvakatre](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/atharvakatre/32/14713_2.png) [@atharvakatre](https://community.plotly.com/u/atharvakatre)\
**Post date:** [April 2, 2022, 5:23pm UTC](https://community.plotly.com/t/make-the-bar-chart-text-go-down-a-line/62631/4 "2022-04-02T17:23:22Z")

</div>

Hi @Matan,

Plotly figures support markdown syntax `<br>` for line breaks, below is a workaround with using custom `ticktext` on axis.

```auto
import plotly.express as px

x = ['long label', 'very long label', 'extra super long label']
y= [10,50,15]

x_labels=[]
for label in x:
    x_labels.append(label.replace(' ','<br>'))
    
print(x_labels)

fig = px.bar(x=x, y=y)
fig.update_xaxes(tickvals=x, ticktext=x_labels)
fig.show()

```

 ![newplot](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/6/c/6c1d261e86fdfd549e43677a4fc2860234f6cb8a.png)

---

<div class="post-metadata">

**Author:** ![Matan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/matan/32/20091_2.png) [@Matan](https://community.plotly.com/u/Matan)\
**Post date:** [April 2, 2022, 6:18pm UTC](https://community.plotly.com/t/make-the-bar-chart-text-go-down-a-line/62631/5 "2022-04-02T18:18:23Z")

</div>

AMAZING! thank you very much!