<div class="chart">
  {{ $id := delimit (shuffle (seq 1 9)) "" }}
  <canvas id="{{ $id }}" height="350"></canvas>
  <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", (event) => {
      const ctx = document.getElementById("{{ $id }}");
      const chart = new Chart(ctx, {
        {{ if eq (.Get "type") "timeseries" }}
        type: 'line',
        options: {
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: {{ .Get "title" }},
            },
          },
          scales: {
            x: {
              ticks: {
                autoSkip: true,
                callback: function(val, index) {
                  return this.getLabelForValue(val) + 's'
                },
              }
            },
            y: {
              {{ if .Get "stacked" }}
              stacked: {{ .Get "stacked"  }},
              {{ end }}
              beginAtZero: true,
              {{ if .Get "max" }}
              suggestedMax: {{ .Get "max" }},
              {{ end }}
            }
          },
        },
        data: {
          labels: [
            {{ if .Get "step" }}
            {{ range seq 0 (.Get "step") 90 }}
            {{ . }},
            {{ end }}
            {{ else }}
            {{ range seq 0 90 }}
            {{ . }},
            {{ end }}
            {{ end }}
          ],
          datasets: {{ .Inner | safeJS }}
        }
        {{ else }}
        {{ .Inner | safeJS }}
        {{ end }}
      });
    });
  </script>
</div>
