Text styling in Bar Chart with Direct Labels

plotly.js
1

I’m trying to build a Bar Chart with Direct Labels (https://plot.ly/javascript/bar-charts/#grouped-bar-chart-with-direct-labels). The chart is ok, but I’d like to change the color of the direct labels to white in order to increase the contrast between marker color and text color. I cannot find the correct syntax to do it. Can anybody help?

2

You can simply set bar textfont.color to white:

3

archmoj, thanks for your fast response! I entered

textfont: {color: ‘rgb(255,255,255)’}

in my trace, but unfortunately, it has no effect. Do I something wrong?

4

Here is a demo.

5

archmoj, thank you so much. Now, it works, there must habe been a deeply hidden mistake in my code that was repaired when copy/pasted your code. Thanks again!

7

The solution from archmoj does not work for all data.

In bar chart, when a bar is really short, Plotly places the label above the bar.
When that happens, the white text is not visible on the white background.