Creating Calendar Heatmaps

đź“Š Plotly Python
1

Hi,

On my way to developing an application, I had a really hard time with making an interactive Calendar Heatmap (kinda like the one on Github and Gitlab), and thanks to this post on Plotly’s community forum I was able to make it.

Using the code provided and adding my own I managed to fix some bugs with pandas weekly data and make it into a package for anyone to use.

(This project is open-source and available on my Github)

I’ve also written an article on medium describing exatcly how to use it, check it out

Here’s what some samples look like

fig = calplot(
    dummy_df,
    x="ds",
    y="value",
    gap=0
)
fig.show()

1_ry_c9NfaxBzqJgh2gNMLIA
1_ry_c9NfaxBzqJgh2gNMLIA800Ă—500 33.6 KB 

fig = calplot(
    dummy_df,
    x="ds",
    y="value",
    dark_theme=True
)
fig.show()

1_XGNv8zBIk6WQLWJHdqtmlQ
1_XGNv8zBIk6WQLWJHdqtmlQ800Ă—500 39.4 KB 

fig = calplot(
    dummy_df,
    x="ds",
    y="value",
    dark_theme=True,
    years_title=True,
    colorscale="purples",
    gap=0,
    name="Data",
    month_lines_width=3, 
    month_lines_color="#fff"
)
fig.show()

1_QumUagn94Yv5O0QK1d4OJw
1_QumUagn94Yv5O0QK1d4OJw1400Ă—880 162 KB

6 Likes
2

Welcome to the community @brunorosilva
Thank you for sharing this app with us. What I especially like about this is also the capability you give the user to create custom color scales easily:

fig = calplot(
    dummy_df,
    x="ds",
    y="value",
    gap=0,
    colorscale=[(0.00, "white"),   (0.33, "#999"),
                (0.33, "#999"), (0.66, "#444"),
                (0.66, "#444"),  (1.00, "#000")]
)
2 Likes
3

Excited to check this out @brunorosilva, looks awesome and congrats on working through the challenges you had.

1 Like
4

I’m continuing the development of the plotly-calplot project under the repository
https://github.com/thomazyujibaba/plotly-calheatmap

Several improvements and new features have already been implemented, including:

  1. Built-in aggregation — pass raw event data with agg=“sum” | “mean” | “count” | “max” instead of pre-aggregating

  2. Vertical orientation — render months as rows using vertical=True

  3. Hourly heatmap — hourly_calheatmap() for hour × day grids per month

  4. Month gap spacing — extra visual separation between months via month_gap

  5. Multi-year support with independent tick configurations per subplot

  6. Year navigation buttons (navigation=True)

  7. Localization support (locale parameter) for month and day names (e.g. pt_BR, es, fr)

  8. Customizable hovertemplate with friendly {placeholder} syntax and customdata columns

  9. Fully customizable colorscales, including custom color lists

  10. Month separator lines, configurable month label placement, and color scale with labels and ticks

  11. Flexible layout options: gap, margin, font_*, paper_bgcolor, plot_bgcolor, and more

Special thanks to @brunorosilva for the original project and foundation that made this continuation possible :folded_hands:

1 Like