How to color a imshow chart based on a custom range

I’m working on a chart that works as a heatmap, but instead of a “traditional” color scale, I want to set a specific color to values between x and x+0.05;

The image below is a good visual example to illustrate what I want to do:

enter image description here

I have tried some approaches to do it but no one of them have worked.

Below is an MWE

import pandas as pd
import plotly.express as px

dict_vals = [
            {"user1": None, "user2": 0.906, "user3": 0.842},
            {"user1": 0.906, "user2": None, "user3": 0.527},
            {"user1": 0.842, "user2": 0.527, "user3": None},
        ]

matrix_df=pd.DataFrame.from_dict(dict_vals)
fig = px.imshow(
    matrix_df,
    x=matrix_df.columns,
    y=matrix_df.columns,
    zmin=0.75,
    zmax=0.95,
    text_auto=True,
    aspect="auto"
)
colors = [
    "rgb(214, 11, 67)",
    "rgb(255, 107, 0)",
    "rgb(255, 201, 77)",
    "rgb(168, 227, 0)",
    "rgb(65, 175, 26)",
    ]

fig.update_coloraxes(
    showscale=False,
    colorscale=[
        (0.0, colors[0]),
        (0.8, colors[1]),
        (0.85, colors[2]),
        (0.9, colors[3]),
        (0.95, colors[4]),
        (1, colors[4]),
    ],
)

If you have any reference about how to solve this, I will be very grateful

Hi @kabure ,

I think this should help you:

1 Like

Hello! After some adaptation, it worked exactly as expected;

Thank you very much

1 Like