Chart.js title issues

[Tzenda]

Hi all,

First of all, thank you very much for taking the time to read this post - I have a Chart.js problem I've been trying to solve for a while now.

It seems like no matter what I do, the chart title is not showing on my posts.

Here is the Shortcode in layouts/shortcodes/chart.html..

{{- if not (.Page.Scratch.Get "hasChartJS") -}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script> Chart.defaults.color = '#fff'; </script>
{{- .Page.Scratch.Set "hasChartJS" true -}}
{{- end -}}

{{- $id := substr (md5 .Inner) 0 16 -}}
<div class="chart">
    <canvas id="{{ $id }}"></canvas>
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        var ctx = document.getElementById('{{ $id }}')
        var options = {{ .Inner | chomp | safeJS }};
        new Chart(ctx, options);
    });
</script>

and here is the code in the post.md file..

{{< chart >}}
{
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Test title which never shows'
      }
    }
  }
}
{{< /chart >}}

and here is the result on the live test server..

Any help or suggestions will be appreciated - thank you!