This PR fixes #7508.

Description

There is currently no option to configure the colorbar.title.text alignment. It is always left-aligned.

This PR proposes a new option align within title, e.g.,

json format:

                "colorbar": {
                    "orientation": "v",
                    "title": {
+                        "align": "end",
                        "text": "This is a colorbar title based on Year values"
                    }
                }

The accepted value for align is one of : start | middle | end.

Changes

Add a new option to configure the colorbar.title.text alignment.

Usages (screenshots were taken from the same position)

Left-aligned ("orientation": "v") (The default)

with "align": "start", same as default (current)

Center-aligned ("orientation": "v")

with "align": "middle"

Right-aligned ("orientation": "v")

with "align": "end"

Note

As for "orientation": "h" (horizontal), I didn't consider this align option, but feel free to comment on it. The implementation is a bit tricky and requires more code. By default, it is positioned in the middle of the colorbar. I think that looks good enough.

Improvement for "align": "end"

IMHO, it would be nice to align the title text (currently in green line) to the side of the tick value (blue line).

What do you think? However, since the fill, background, outline, and tick of colorbar are not grouped, it is trivial to move the colorbar (except the title text) to the left so that they are aligned with the title text. (I want to move the bar to left because it can save more space)
I'm thinking maybe we can group the colorbar compoents into a container and move together?
Maybe there is other briliant simple way to fulfil this?

Suggestions from the Plotly team are appreciated!