How to Make Plot Responsive

jrg94 commented 2 years ago

I love this tool! I was able to get it working great for my data set. The only problem is that the size is fixed. Just about every plotly figure automatically rescales as the viewport changes size, but this one doesn't. Any idea how I could accomplish this?

brunorosilva commented 2 years ago

@jrg94 Thanks so much for the feedback and sorry for the late reply.

I'll be labelling this one as a bug and I'll fix it for the next release.

In the meantime you can actually just use update_layout(width=None, height=None) and the plot will be responsive. You might have to do something about the fontsize though, probably through CSS. I've tried setting the font-size to None, but it had no effect.

More in-depth example:

import numpy as np
import pandas as pd

from plotly_calplot.calplot import calplot

# mock setup
dummy_start_date = "2019-01-01"
dummy_end_date = "2021-10-03"
dummy_df = pd.DataFrame(
    {
        "ds": pd.date_range(dummy_start_date, dummy_end_date),
        "value": np.random.randint(
            0,
            30,
            (pd.to_datetime(dummy_end_date) - pd.to_datetime(dummy_start_date)).days
            + 1,
        ),
    }
)
fig1 = calplot(
      dummy_df, 
      x="ds", 
      y="value",
      dark_theme=True,
      showscale=True
)

fig1.update_layout(height=None, width=None)
fig1.show()

Output:

https://user-images.githubusercontent.com/17326742/179370275-1f92f0ad-7f51-4000-977d-19e64319a0f0.mov

jrg94 commented 2 years ago

Thanks! That was a quick fix. All I needed was to set width to None, and I got what I wanted. 👍🏼

brunorosilva / plotly-calplot

How to Make Plot Responsive #9