Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Some shapes of the subplots surpass the graph limits

See original GitHub issue

Bug

Shapes added to subplots with yref of the form y*0 domain surpass the graph limits.

More information

After some debug I noticed that the clip-path CSS property of the underlying HTML element for the elements with yref of the form y*0 domain have a different clip-path.

Steps to reproduce

Execute the following code

# ----- Imports

import pandas as pd
import random
import datetime
import seaborn as sns
from plotly import graph_objects as go, offline as pyo
from plotly.subplots import make_subplots    

sns.set(color_codes=True)
sns.set_context("paper")
pyo.init_notebook_mode()


# ----- Body

NUM_CLUSTERS = 20
DEFAULT_PALETTE = "gist_ncar"
DEFAULT_SEED = 0
VOLUME_COL = "num"
CLUSTERS_IDS = [i for i in range(NUM_CLUSTERS)]


def get_global_colours(
    clusters,
    palette_name: str = DEFAULT_PALETTE,
    seed_num: int = DEFAULT_SEED,
) -> dict:
    rnd = random.Random(seed_num)
    clusters_size = len(clusters)
    colors = sns.color_palette(palette_name, n_colors=clusters_size).as_hex()
    rnd.shuffle(colors)
    return {partition: colors[index] for index, partition in enumerate(clusters)}


# create mock dataframe
df = pd.DataFrame.from_records(
    [
        {
            "num": i,
            "index": random.randint(1, 100),
            "cluster_id": random.choice(CLUSTERS_IDS),
        }
        for i in range(100)
    ]
)

# set index
df.set_index(["cluster_id", "index"], inplace=True)

# create subplots
fig = make_subplots(
    rows=NUM_CLUSTERS,
    cols=1,
    shared_xaxes=True,
    vertical_spacing=0.01,
)

# 
colour_dict = get_global_colours(CLUSTERS_IDS)

# update layout to add button
fig.update_layout(**{
    "updatemenus": [
        {
            "type": "buttons",
            "active": 0,  # start button inactive
            "buttons": [
                {
                    "label": "Hide highlight",
                    "method": "relayout",
                    "args2": [
                        "shapes",
                        [
                            {
                                "fillcolor": "darkorange",
                                "line": {"width": 0},
                                "opacity": 0.25,
                                "type": "rect",
                                "x0": 50,
                                "x1": 100,
                                "xref": "x",
                                "y0": 0,
                                "y1": 1,
                                "yref": "y domain"
                                if cluster_idx == 0
                                else "y%s domain" % (cluster_idx + 1),  # noqa: WPS323
                            }
                            for cluster_idx in CLUSTERS_IDS
                        ],
                    ],
                    "args": ["shapes", []],
                },
            ],
        },
    ],
})

# adding plots
for position, cluster in enumerate(CLUSTERS_IDS):
    cluster_df = df.loc[cluster]
    fig.add_trace(
        go.Scatter(
            x=list(cluster_df.index),
            y=list(cluster_df[VOLUME_COL]),
            name=cluster,
            fill="tozeroy",
            mode="lines",
            line_color=colour_dict[cluster] if colour_dict else None,
        ),
        row=position + 1,
        col=1,
    )

display(fig)