I embedded a interactive plotly graph into a Hugo webpage using the instructions found here. The simplified instructions I used are below the cut (could be helpful to anyone who needs a simpler instructional in the future).
After finishing all these steps, I was able to see the graph on the rendering of my webpage, 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.
Here's the repo for the example site if needed (git clone, download hugo, and use hugo server in dir to render page): https://github.com/kc-tal/hugo-plotly-example
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 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 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)