plotly.js icon indicating copy to clipboard operation
plotly.js copied to clipboard

feat: add `colorbar.title.text` alignment support

Open Lexachoc opened this issue 4 months ago • 1 comments

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)

image

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

with "align": "middle"

image

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

with "align": "end"

image

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).

image

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 avatar Aug 06 '25 00:08 Lexachoc

@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?

camdecoster avatar Sep 16 '25 18:09 camdecoster