{% set ID = random() %}
<div style="position: relative; height: auto; min-height: {{ settings.chartHeight }}vh; width: 100%;">
  <canvas id="submission-chart-{{ ID }}"></canvas>
</div>

{% js "https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js" %}

{% js %}
  $(function () {
    setTimeout(function() {
      var ctx       = document.getElementById("submission-chart-{{ ID }}").getContext("2d");
      var chartData = {{ chartData|json_encode|raw }};
      var incrementSkip = {{ incrementSkip }};

      // Set maintainAspectRatio to false so the chart fills its container
      chartData.options = chartData.options || {};
      chartData.options.responsive = true;
      chartData.options.maintainAspectRatio = false;

      // Optional: skip every nth label on the x-axis
      if (chartData.options.scales && chartData.options.scales.x && chartData.options.scales.x.ticks) {
        chartData.options.scales.x.ticks.callback = function(value, index) {
          return index % incrementSkip === 0 ? value : null;
        };
      }

      new Chart(ctx, chartData);
    }, 200);
  });
{% endjs %}