How to color ticktext in plotly?

Question

I would like to display my ticktexts in my plotly xaxis with different colors based on the respective string (based on a dictionary). Is there a functionality in plotly to do this, maybe via HTML coding?

 ticktext = ['<font color="red">{}</font> '.format(x) for x in ticktexts]

doesn't work, it gives the html string to the labels.

Check out [tickcolor](https://plot.ly/python/reference/#layout-xaxis-tickcolor) or [tickfont color](https://plot.ly/python/reference/#layout-xaxis-tickfont-color) — Albo, Oct 01 '19 at 11:39
tickcolor is used to change the color of the entire axis, as far as I understand. I, however, would like to have the possibility to have different colors in the same axis — MaxS, Oct 01 '19 at 13:03

Albo · Accepted Answer · 2021-03-23T16:23:59.847

14

A little bit of a workaround using LaTeX can help you here (sorry @Iwileczek, I stole your example, hope you don't mind) because plotly has full LaTeX support:

def color(color, text):
    s = '$\color{' + str(color) + '}{' + str(text) + '}$'
    return s

animals=['giraffes', 'orangutans', 'monkeys']

colors = ['red', 'green', 'yellow', 'blue']
ticks = [5, 10, 15, 20]
keys = dict(zip(ticks, colors))

fig = go.Figure([go.Bar(x=animals, y=[20, 14, 23])])
ticktext = [color(v, k) for k, v in keys.items()]
print(ticktext)
fig.update_layout(
yaxis=dict(tickmode='array', ticktext=ticktext, tickvals=ticks)
)
fig.show()

Update March 2021:

If you don't want to use the LaTex rendered font by MathJax in your output, use the solution of @Dapcer with an HTML styling:

def color(color, text):
    return f"<span style='color:{str(color)}'> {str(text)} </span>"

Example with fig.update_layout(font=dict(family="Times New Roman") [...]:

edited Mar 23 '21 at 16:23

answered Oct 01 '19 at 14:47

Albo

1,584
9
27

5

I would call this a solution rather than a workaround! – MaxS Oct 02 '19 at 08:28
[Didn't worked for me, unfortunately](https://stackoverflow.com/questions/65477108/individually-color-side-ticks-of-a-plotly-graph-objects-bar) the LaTex text comes out in its encoded format rather than colored one. – Revolucion for Monica Dec 29 '20 at 10:50
It works for me and is a brilliant answer, but the latex shows up as a different font than the rest of the text. The latex seems to be treating the text in equation style, rather than text style. I tried adding `\text{...}` around it, but that didn't work. I'm having trouble finding latex that is valid that treats the text as normal text rather than equation text. – David Parks Mar 22 '21 at 19:35
1

@DavidParks You can use @Dapcer's solution with `return "" + str(text) + ""` as the `color` function, this gives you the same font as the rest. Because `MathJax` (which is used to render the `Latex` in plolty), only supports very limited to near no other fonts... see [link](http://docs.mathjax.org/en/latest/output/fonts.html) – Albo Mar 23 '21 at 16:12

score 9 · Answer 2 · edited Aug 05 '20 at 02:27

HTML alternative to Albo's solution:

I used Albo's solution and replaced Latex code with HTML code. Same solution but avoiding Latex fonts if you are not inserting Math symbols.

Just replace Latex code from

def color(color, text):
    s = '$\color{' + str(color) + '}{' + str(text) + '}$'
    return s

to HTML code

def color(color, text):
    # color: hexadecimal
    s = "<span style='color:" + str(color) + "'>" + str(text) + "</span>$"
    return s

lwileczek · Answer 3 · 2019-10-07T12:47:42.477

Please see Albo's answer!

You can change to a single color by updating the color property of the yaxis or xaxis. The color property must be a single color as it only accepts strings that decode to colors. However, you can update the ticktext property of charts with Latex formatting to accomplish this. Please see Albo's answer to learn how to do this.

    import plotly.graph_objects as go
    animals=['giraffes', 'orangutans', 'monkeys']

    fig = go.Figure([go.Bar(x=animals, y=[20, 14, 23])])
    fig.update_layout(
    yaxis=dict(color="#E90")

    )
    fig.show()

Documentation

y-axis color
tick text
Plotly & LaTex (slightly out of date)

How to color ticktext in plotly?

3 Answers3

Please see Albo's answer!

Documentation

Linked