HugoBlox-kit/modules/blox-bootstrap/layouts/_shortcodes/chart.html

{{/*
    Docs: https://docs.hugoblox.com/content/writing-markdown-latex/#charts

    Parameters
    ----------
    data :
        Plotly JSON file name (without ".json" extension, since it is appended automatically to the name).
        Expects the JSON file to be placed in the page folder.
*/}}

{{ $json := printf "./%s.json" (.Get "data") }}
{{ $id := delimit (shuffle (seq 1 9)) "" }}
<div id="chart-{{$id}}" class="chart"></div>
<script>
  (function() {
    let a = setInterval( function() {
      if ( typeof window.Plotly === 'undefined' ) {
        return;
      }
      clearInterval( a );

      Plotly.d3.json({{$json}}, function(chart) {
        Plotly.plot('chart-{{$id}}', chart.data, chart.layout, {responsive: true});
      });
    }, 500 );
  })();
</script>