Hugo Hextra Chart Shortcode

chart.html

<!-- layouts/shortcodes/chart.html -->
<div id="{{ .Get "id" }}" style="width:{{ .Get "width" }}px;height:{{ .Get "height" }}px;">
</div>

<script>
    let data = JSON.parse({{ .Inner }})
    console.log(data)
	  canvas = document.getElementById('{{ .Get "id" }}');
    Plotly.newPlot( canvas, [{x: data.ord, y: data.absz}], { margin: { t: 0 } } );
</script>

head-end.html

<!-- layouts/partials/custom/head-end.html-->
{{- if .Page.Params.chart -}}
<script src="https://cdn.plot.ly/plotly-2.31.1.min.js" charset="utf-8"></script>
{{ end }}

klimawandel

---
title: "Klimawandel"
date: 2024-04-25T15:54:58+02:00
chart: true
---


{{< chart id="hohenpeissenbergplot" width="600" height="300" dataUrl="" >}}
{
    "city": "Hohenpeissenberg",
    "unit": "Celsius",
    "ord": ["2024-04-01", "2024-04-02", "2024-04-03", "2024-04-04", "2024-04-05", "2024-04-06", "2024-04-07", "2024-04-08", "2024-04-09", "2024-04-10", "2024-04-11", "2024-04-12", "2024-04-13", "2024-04-14", "2024-04-15", "2024-04-16", "2024-04-17", "2024-04-18", "2024-04-19", "2024-04-20", "2024-04-21", "2024-04-22", "2024-04-23", "2024-04-24", "2024-04-25", "2024-04-26", "2024-04-27", "2024-04-28", "2024-04-29", "2024-04-30"],
    "absz": [12, 14, 13, 15, 16, 15, 14, 13, 12, 11, 12, 13, 15, 16, 15, 14, 15, 14, 15, 16, 18, 19, 20, 21, 19, 18, 17, 16, 15, 15]
}
{{< /chart >}}

Demonstration how to add charts to a Hugo/Hextra website.
Place the chart.html in your shortcodes folder (layouts/shortcodes/) and add the custom script reference in layouts/partials/custom/head-end.html. Then, use the chart like in the example "klimawandel" Markdown content.