Issue when sending chart to Chart Studio

📊 Plotly Python
1

Hi, I have the return matrix data that I would like to place in a heat map. here is the code I used:

import chart_studio.plotly as py
import plotly.express as px
fig = px.imshow(returns,  title="Monthly Returns (%)",
                text_auto=".2f", aspect="auto", color_continuous_scale='RdBu_r')
fig.update_coloraxes(showscale=False)
py.plot(fig, filename='Monthly Returns', auto_open=True)
fig.show()

and here is a snapshot of my return data which is a Dataframe:

           JAN       FEB       MAR  ...       OCT       NOV       DEC
2013  0.000000  0.000000  0.000000  ...  0.548652  4.529969 -0.330205
2014  0.083121 -0.306542 -0.193584  ... -0.131052  0.118495 -0.156965
2015 -0.313051  0.163174 -0.040733  ...  0.322954  0.211307  0.139780
2016 -0.154908  0.199167 -0.049330  ...  0.148488  0.062674  0.302024
2017  0.001756  0.229343 -0.094139  ...  0.481843  0.633970  0.426035
2018 -0.326822  0.072044 -0.355961  ... -0.041521 -0.324128 -0.109768
2019 -0.092355  0.102807  0.076174  ...  0.137331 -0.158202 -0.062226
2020  0.313431 -0.083332 -0.265470  ...  0.249103  0.342227  0.587086
2021  0.185948  0.364157  0.257539  ...  0.486913 -0.064500 -0.184220
2022 -0.195134 -0.004727  0.022333  ...  0.000000  0.000000  0.000000

when I run the code everything works fine and I get this chart shown to me:

image
image2646×1506 339 KB

However, when I try to look at it using the chart studio the labels for each square is missing and I can’t get to placing them, here is a picture of the chart on chart studio:

Monthly Returns
Monthly Returns945×671 19.6 KB

it is imperative that those labels show on the chart but for the lid of me I can’t figure out how to show them, anyone has any suggestions? Thank you in advance.

2

@sarah2r,
Yes, you are right. Chart-studio does not display the text on the heatmap cells. If you want to get an annotated heatmap that displays the annotations, on chart-studio, too, then you can use the classical `ff.create_annotated_heatmap~:

import plotly.figure_factory as ff

import numpy as np
ret = -1+2*np.random.rand(120)
z= ret.reshape((10, 12))
text= [[round(z[i][j], 2) for j in range(12)] for i in range(10)]
fig = ff.create_annotated_heatmap(z, annotation_text=text, colorscale="RdBu", showscale=False)                  
fig.update_layout(title="ff.create_annotated_heatmap",
                  yaxis_autorange="reversed") #yaxis is reversed to ensure the same data position like in your plot with px.imshow

fig.show()

This is the corresponding plot: https://chart-studio.plotly.com/~empet/16134.

I recommend to open an issue on plotly.js repository https://github.com/plotly/plotly.js/issues to be brought to the plotly team attention, and to fix it.

The difference between the classical annotated heatmap, and the heatmap defined like in your example , is that in the former case we are sending to chart-studio the text exactly as it should be displayed, as layout.annotations, while in the later one is set only the texttemplate, and the text must be imported from z-data with the given format, but it seems that chart-studio cannot do it.

1 Like
3

thank you so much for you detailed explanation, your code helped me much! ill certainly bring that to their attention?