# Embed Plotly Figure (HTML) in Markdown Post

**URL:** <https://discourse.gohugo.io/t/embed-plotly-figure-html-in-markdown-post/24993>\
**Category:** support\
**Tags:** diagram, chart\
**Created:** [April 24, 2020, 11:35am UTC](https://discourse.gohugo.io/t/embed-plotly-figure-html-in-markdown-post/24993 "2020-04-24T11:35:06Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![eflegara](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/eflegara/32/11175_2.png) [@eflegara](https://discourse.gohugo.io/u/eflegara)\
**Post date:** [April 24, 2020, 11:35am UTC](https://discourse.gohugo.io/t/embed-plotly-figure-html-in-markdown-post/24993/1 "2020-04-24T11:35:06Z")

</div>

Hi! New to Hugo. I exported a plotly graph to html via using the `write_html` method (Python Jupyter). Now I want to embed this plotly generated graph in one of my markdown posts. I cannot find the answer yet. I tried to look at shortcodes, I’m not sure how it’s done. Any help will be greatly appreciated. Thank you.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [April 24, 2020, 1:03pm UTC](https://discourse.gohugo.io/t/embed-plotly-figure-html-in-markdown-post/24993/2 "2020-04-24T13:03:13Z")

</div>

There are several ways to go about this, but I would write the HTML files to somewhere below /assets, e.g. “assets/plotly/mygraph.html”.

Then you can do something like this from a shortcode:

```auto
{{ $r := resources.Get (printf "plotly/%s.html" ($.Get 0)) }}
{{ $r.Content | safeHTML }}

```

And then send in the graph name as the shortcode param, e.g. “{{\< plotly mygraph \>}}”

---

<div class="post-metadata">

**Author:** ![eflegara](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/eflegara/32/11175_2.png) [@eflegara](https://discourse.gohugo.io/u/eflegara)\
**Post date:** [April 24, 2020, 3:10pm UTC](https://discourse.gohugo.io/t/embed-plotly-figure-html-in-markdown-post/24993/3 "2020-04-24T15:10:50Z")

</div>

Thank you! I will try this. I also [found a solution](https://ig248.gitlab.io/post/2018-11-05-plotly-sample/) online where one can use two simple Hugo shortcodes. The input file would be a json file.

I have successfully rendered the figure on my local machine. However, when I uploaded and made it live, the plotly objects don’t show anymore. I will try to figure out what’s happening here.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [April 24, 2020, 4:48pm UTC](https://discourse.gohugo.io/t/embed-plotly-figure-html-in-markdown-post/24993/4 "2020-04-24T16:48:54Z")

</div>

Yes, the JSON approach makes sense.

---

<div class="post-metadata">

**Author:** ![eflegara](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/eflegara/32/11175_2.png) [@eflegara](https://discourse.gohugo.io/u/eflegara)\
**Post date:** [April 24, 2020, 5:38pm UTC](https://discourse.gohugo.io/t/embed-plotly-figure-html-in-markdown-post/24993/5 "2020-04-24T17:38:16Z")

</div>

Thank you. But it looks like the shortcode does not automatically add the baseURL that’s why I was getting errors locating the json file. Now, I’m trying to explicitly put the baseURL when calling the json file via the shortcode.

The shortcode looks like this:

```
{{ $json := .Get "json" }}
{{ $height := .Get "height" | default "200px" }}
<div id="{{$json}}" class="plotly" style="height:{{$height}}"></div>
<script>
Plotly.d3.json({{$json}}, function(err, fig) {
    Plotly.plot('{{$json}}', fig.data, fig.layout, {responsive: true});
});
</script>

```

Then, in the body of my Markdown, I initially used

```
{{< plotly json="/plotly/fig1.json" height="700">}} 

```

But, my baseURL is

```
http://thisismy.site/random-hugo-project/public/

```

And, when I debugged the error, I noticed that it was looking for my `fig1.json` file at

```
http://thisismy.site/plotly/fig1.json

```

when it should be looking at

```
http://thisismy.site/random-hugo-project/public/plotly/fig1.json

```

Is there a more elegant way to fix this? Thank you!

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [April 26, 2020, 5:38pm UTC](https://discourse.gohugo.io/t/embed-plotly-figure-html-in-markdown-post/24993/6 "2020-04-26T17:38:21Z")

</div>

Closed on April 26, 2020, 5:38pm UTC

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.