Heatmap (both go and px) not showing text annotations on Hugo site

Hi, my issue appears to be similar to issue #3527, but on that issue they’re using different environments (Dash and Jupyter). I figured I’d provide more data over here. My use case is creating plotly.py figures in vscode, then exporting the figures as json to Hugo, and calling them inside markdown files via Hugo shortcodes. This flow is working great so far, except for this issue where heatmap text annotations don’t show up in posts.

My environment: Ubuntu 20.04.4 LTS Python 3.9.5 (default, Nov 23 2021, 15:27:38) [GCC 9.3.0] on linux plotly==5.6.0 hugo v0.88.1-5BC54738 linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio VSCode Version: 1.65.2 Commit: c722ca6c7eed3d7987c0d5c3df5c45f6b15e77d1 Date: 2022-03-10T15:36:26.048Z Electron: 13.5.2 Chromium: 91.0.4472.164 Node.js: 14.16.0 V8: 9.1.269.39-electron.0 OS: Linux x64 5.4.0-105-generic

Test case: (from https://plotly.com/python/heatmaps/)

import plotly.graph_objects as go

fig = go.Figure(data=go.Heatmap(
                    z=[[1, 20, 30],
                      [20, 1, 60],
                      [30, 60, 1]],
                    text=[['one', 'twenty', 'thirty'],
                          ['twenty', 'one', 'sixty'],
                          ['thirty', 'sixty', 'one']],
                    texttemplate="%{text}",
                    textfont={"size":20}))

Hugo Config:

 <!-- head tag -->
  {{ if .Params.plotly }}
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  {{ end }}

<!-- layouts/shortcodes/plotly.html -->
{{ $json := .Get "json" }} 
{{ $height := .Get "height" | default "200px" }}
<div id="{{$json}}" class="plotly" style="height:{{$height}}; margin-top:-1rem;"></div>
<script>
    Plotly.d3.json({{ $json }}, function (err, fig) {
        Plotly.plot('{{$json}}', fig.data, fig.layout, { responsive: true });
    });
</script>

<!-- call from within post.md -->
{{< plotly json="/json/heatmap2.json" height="700px" >}}

My workflow:

• Create an annotated heatmap fig on a VSCode Python script (using either graph_objects or plotly.express)
• Create the figure using: fig.show(), fig.write_image("fig.png") and fig.write_json(fig.json")
• Annotations show perfectly for fig.show(), fig.write_image("fig.png")
• I copy and paste fig.json in my hugo/static/ folder
• The heatmap shows, but without annotations, see pic below Thanks for reading. Happy to help with any tests.

[rafaelmarino]

Thanks Nicolas, that makes sense. I read through some of that, followed a few links, and I’m happy to report I’ve managed to get it working 😃

For those who stumble upon this thread in the future, here’s what I did:

1. Update head.html with:

  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script src="https://cdn.plot.ly/plotly-2.11.1.min.js"></script>

1. Update plotly.html with:

d3.json({{ $json }}).then(function (fig) {
        Plotly.newPlot('{{$json}}', fig.data, fig.layout, { responsive: true });
});

[shouldsee]

This is indeed awkward but we chose this path in order not to impose breaking changes on folks relying on the “latest” URL so we will not be changing the version of Plotly.js that it points to any more. We apologize for the confusion.

Gotcha. Thanks for explaining!