Interactive (timelapse) Plotly graph doesn't 'play' after embedding it into Hugo

Similar to a question asked on here before about embedding a plotly graph into Hugo, I’ve run into a problem in getting the interactive graph to play after it’s embedded.

It’s a timelapse choropleth graph ( with Here is my stackoverflow question with the appropriate links since I can’t post more than 2 links on this post. I’ve transcribed the steps I used/outlined on SO here (could be helpful to anyone who needs a simpler instructional in the future):

Step 1 : Write your plotly graph into a json file using fig.write_json('<path/filename.json') . Make sure to place the json file in your <homefolder>/static folder in your Hugo template

Step 2 : Create both a load-plotly.html and plotly.html shortcode files with the code found in the SO link under <homefolder>/layouts/shortcodes . Make a folder if one doesn’t already exist.

Step 3 : Under <homefolder>/layouts create a partials folder. Within that create a head.html file and copy and paste the contents of what is found in the themes native head.html file found in <homefolder>/<theme name>/layouts/partials/head.html . Then at the bottom, add the corresponding code found in the SO link.

Step 3 : For whichever page needs the plotly graph, make sure to add plotly: true in the front matter (ie where the title, date, etc. goes at the top of a markdown file)

After finishing all these steps, I was able to see the graph on the rendering of my webpage ( hugo server , but unfortunately the graph isn’t ‘playable’. It just appears, and I can zoom in and out so it’s ‘interactive’, but the play button doesn’t result in progression of the data.

The JSON file of my data can be found in the original SO question (can’t add multiple links here). I’m new to Hugo and Plotly, but I’m wondering if it’s because the original graph is created with the submodule and the Hugo embedding process above does not work for that.

Would love any help in figuring out where Hugo and plotly are not quite matching up for this graph.

Can you please post a link to the public repository for your project?


Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

That makes sense, thanks for the reminder. Here’s the link to a dummy repo: GitHub - kc-tal/hugo-plotly-example

This repository is… messed up.

git clone --recurse-submodules
cd hugo-plotly-example/

Error: Unable to locate config file or config directory. Perhaps you need to create a new site.
Run hugo help new for details.

Please provide a working example.

The problem you are experiencing is not related to anything you have done in Hugo (shortcodes, templates, etc.).

Try this:

git clone --single-branch -b hugo-forum-topic-32481 hugo-forum-topic-32481
cd hugo-forum-topic-32481
npm install
npx serve

Then visit http://localhost:5000.

Everything is contained within index.html and the JSON file. Perhaps you can work with the Plotly community to get this single page example working, and then figure out how to do it Hugo.

1 Like

I’m sorry about the repo, it should be fixed now.

*Oh nevermind, I understand the npm function. I’ll see if someone in the plotly forum can help diagnose this single page example. I’m new to git sharing etiquette, so I wanted to make sure it’s ok to share GitHub - jmooring/hugo-testing at hugo-forum-topic-32481 with them to do that.

Just share the index.html file and your json file.

If you need to share the repository, make sure you use these instructions:

git clone --single-branch -b hugo-forum-topic-32481 hugo-forum-topic-32481
cd hugo-forum-topic-32481
npm install
npx serve