feat: add `colorbar.title.text` alignment support
This PR fixes https://github.com/plotly/plotly.js/issues/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!
@Lexachoc thanks for your issue/PR combo! I like this idea, but like you mentioned, I think that it would be more visually pleasing if the x coord of the anchor was adjusted for the middle and end options. Somewhere above this line, would you be able to update x for an alignment value of middle or end?