Skip to content

[BUG]: the colorbar of the Heatmap does not honor theme related parameters #5532

@12rambau

Description

@12rambau

Description

In my project, we have a solid theming mechanismi that help us maintain consistency across the tens of plots that we are building in the tool. It also allow us to implement easily a theme switch as it's becomes as simple as changing the theme of each figure instead of reinventing the wheel. I am starting to use the Heatmap object and I was surprised that the parameters set in the theme template are not honored by the display.

the minimal theme I would like to use is the following with 1 othe parameter (in this case centering the title) and simple edit of the colorbar (no outlined, red text).

theme= {
    "layout": {
        "title": {
            "xanchor": "center", # Center the title
        },
        "coloraxis": {
            "colorbar": {
                "len": 1.0,  # Full height of the plot
                "lenmode": "fraction",  # Length relative to plot height
                "yanchor": "bottom",  # Anchor at bottom
                "y": 0,  # Position at bottom
                "x": 1.0,  # Position close to the plot
                "thickness": 20,  # Width of the colorbar
                "title": {"side": "right", "font": {"color": "red"}},  # Title on the right side in red
                "tickfont": {"color": "red"},  # Tick labels in red
                "outlinewidth": 0,  # No outline
            },
        },
    },
}

Screenshots/Video

Note that the title is effectively moved but nothing is changed on the colorbar. I can still move this parameters in the colorbar parameter of the heatmap but it will not fly on the long run.

Image

Steps to reproduce

I created a simple notebook cell you can execute in any environment to reproduce my pattern:

import numpy as np
import plotly.graph_objects as go
import plotly.io as pio

# Generate random data
np.random.seed(42)
z_data = np.random.randn(10, 15) * 20 + 10

theme = {
    "layout": {
        "title": {
            "xanchor": "center", # Center the title
        },
        "coloraxis": {
            "colorbar": {
                "len": 1.0,  # Full height of the plot
                "lenmode": "fraction",  # Length relative to plot height
                "yanchor": "bottom",  # Anchor at bottom
                "y": 0,  # Position at bottom
                "x": 1.0,  # Position close to the plot
                "thickness": 20,  # Width of the colorbar
                "title": {"side": "right", "font": {"color": "red"}},  # Title on the right side in red
                "tickfont": {"color": "red"},  # Tick labels in red
                "outlinewidth": 0,  # No outline
            },
        },
    },
}

pio.templates["custom"] = go.layout.Template(theme)
pio.templates.default = "custom"

# Create labels
y_labels = [f"Row {i}" for i in range(10)]
x_labels = [f"Col {i}" for i in range(15)]

fig = go.Figure()

# Create heatmap
fig.add_trace(
    go.Heatmap(
        z=z_data,
        x=x_labels,
        y=y_labels,
        colorscale='Viridis',
        #colorbar={"title": "Value"}
    )
)

fig.update_layout(
    title="Random Heatmap",
    xaxis_title="Columns",
    yaxis_title="Rows",
)

fig.show()

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugsomething broken

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions