How to change annotation orientation in plotly?

📊 Plotly Python
1

Say I have the following figure:

import numpy as np
import plotly.graph_objs as go

z=np.random.randint(1000, 11000, size=20)
trace=dict(type='scatter',
          x=3+np.random.rand(20),
          y=-2+3*np.random.rand(20),
          mode='markers',
          marker=dict(color= z, 
                      colorscale='RdBu', size=14, colorbar=dict(thickness=20)))

axis_style=dict(zeroline=False, showline=True, mirror=True)
layout=dict(width=550, height=500,
            xaxis=axis_style,
            yaxis=axis_style,
            hovermode='closest',

           )
fig=go.FigureWidget(data=[trace], layout=layout)
fig

enter image description here

Now say I want the colorbar to have a title. Since plotly does not currently have a direct way to do that, if I understand correctly, I am doing this through annotations as shown here:

layout.update(
    annotations=[dict(
          x=1.12,
          y=1.05,
          align="right",
          valign="top",
          text='Colorbar Title',
          showarrow=False,
          xref="paper",
          yref="paper",
          xanchor="center",
          yanchor="top"
        )
    ]
)

As we can see, the colorbar title appears:

fig=go.FigureWidget(data=[trace], layout=layout)
fig

enter image description here

However, now say I want to place the colorbar title sideways, along the colorbar, like so:

enter image description here

How do I do this?

2 Likes
2

Got it. This can be done with the textangle attribute of layout:

    annotations=[dict(
          # Don't specify y position, because yanchor="middle" should do it
          x=1.22,
          align="right",
          valign="top",
          text='Colorbar Title',
          showarrow=False,
          xref="paper",
          yref="paper",
          xanchor="right",
          yanchor="middle",
          # Parameter textangle allow you to rotate annotation how you want
          textangle=-90
        )

image

3 Likes
3

Hi @kristada619

just to inform you that there is actually an attribute to change the colorbar title :slightly_smiling_face:

fig.data[trace_num].marker.colorbar.title.text = 'your colorbar title'

BR, Alex

4

@Alexboiboi Oh, I see. I checked it in code, and it seems it should be

fig.data[trace_num].marker.colorbar.title = 'your colorbar title'

Otherwise, with the ...title.text, I get the following error:

ValueError: 
    Invalid value of type 'builtins.dict' received for the 'title' property of scatter.marker.colorbar
        Received value: {'text': 'your colorbar title'}

    The 'title' property is a string and must be specified as:
      - A string
      - A number that will be converted to a string

Anyhow, is there any way to rotate the colorbar title and place it in the middle vertically?

Or do we have to use the annotation method I used above?

5

Hi @kristada619,

maybe you are using an older version of plotly:

  • Plotly.js 1.43 converted title properties (e.g. layout.title ) from strings into compound objects that contain the text as the text property along with new title placement attributes x , y , xref , yref , xanchor , yanchor and pad . Plotly.py 3.5.0 follows the new schema, but still supports specifying title as a string, in which case the string is assigned to the title.text property (#1302)
6

Yes

fig.data[trace_num].marker.colorbar.titleside = 'right'

7

Oh, I see. That’s great to know. Thanks @Alexboiboi!

The plotly version in my system is ‘3.3.0’