Add Diagram in HUGO 🖼️

Add Diagram in HUGO 🖼️ with Plotly.js

create a Shortcode in HUGO to add Diagrams with Plotly.js To create a Hugo shortcode to embed Plotly.js diagrams, you can define a shortcode that includes the Plotly.js library and renders a Plotly chart based on JSON data or JavaScript code provided within the shortcode. Here’s a simple example to create a shortcode named plotly.html: Create a file named plotly.html inside the layouts/shortcodes/ directory of your Hugo site. Add the following code to plotly.html: {{ $id := printf "plotly-%d" (add (now.Unix) (len .Inner)) }}  <div id="{{ $id }}" style="width: {{ .Get "width" | default "100%" }}; height: {{ .Get "height" | default "600px" }};"></div>  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script> (function() { var data = {{ .Inner | safeJS }}; var layout = {{ .Get "layout" | default "{}" | safeJS }}; Plotly.newPlot('{{ $id }}', data, layout); })(); </script> Usage in your Markdown:

HUGO - This article is part of a series.

1: Add Chart.js in HUGO 📈

2: This article

3: Monetize Your Hugo Site with Google AdSense 💰

4: Add Google Analytics in HUGO 🌟

5: Build Formula Calculator in HUGO 🧮

6: Build Modular Composable Calculator in HUGO 🧮

7: Embed PDF in HUGO 📄

create a Shortcode in HUGO to add Diagrams with Plotly.js

To create a Hugo shortcode to embed Plotly.js diagrams, you can define a shortcode that includes the Plotly.js library and renders a Plotly chart based on JSON data or JavaScript code provided within the shortcode.

Here’s a simple example to create a shortcode named plotly.html:

Create a file named plotly.html inside the layouts/shortcodes/ directory of your Hugo site.
Add the following code to plotly.html:

{{ $id := printf "plotly-%d" (add (now.Unix) (len .Inner)) }}

<!-- Plotly chart container -->
<div id="{{ $id }}" style="width: {{ .Get "width" | default "100%" }}; height: {{ .Get "height" | default "600px" }};"></div>

<!-- Load Plotly.js from CDN -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<script>
  (function() {
    var data = {{ .Inner | safeJS }};
    var layout = {{ .Get "layout" | default "{}" | safeJS }};
    Plotly.newPlot('{{ $id }}', data, layout);
  })();
</script>

Usage in your Markdown:

Explanation:

width and height attributes control the size of the plot container.
The layout parameter allows passing a JSON object for Plotly layout settings.
The actual plot data is passed inside the shortcode as JSON and is safely embedded in the script.

This lets you embed interactive Plotly charts easily within your Hugo content. Let me know if you want further customization or examples.

Add Diagram in HUGO 🖼️ with Plotly.js

create a Shortcode in HUGO to add Diagrams with Plotly.js

Explanation:

Similar Articles

Add Chart.js in HUGO 📈

Monetize Your Hugo Site with Google AdSense 💰

Add Google Analytics in HUGO 🌟

Build Formula Calculator in HUGO 🧮

Build Modular Composable Calculator in HUGO 🧮

Embed PDF in HUGO 📄

Recommended Articles 📂🔥

Embed PDF in HUGO 📄

Determinants (part 1)

Determinants (part 2)

Matrices

Practice Assignment 1

Systems of Linear Equations

Vectors

Download Assets | 🐍 Blender Product Animation Tutorial | Snake Wrap Effect 🌟