Chart.js not being displayed

support
1

I’m trying to get chart.js running as instructed here → GitHub - shen-yu/hugo-chart: a Chart.js component for Hugo.
I followed the README

  • The demo post is being displayed
  • the source code shows the chart.min.js being loaded from the CDN
  • the url of the CDN is correct

But the post stays empty without any chart being displayed.
hugo server shows no errors.
I tried theme “story” and “mainroad”

Hugo version is v0.110.0+extended

What could be wrong?

2

In the shortcode, replace this:

<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>

With this:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

There are now 3 open issues about this, and the author is unresponsive.

Additionally, if you place multiple charts on the same page, the script is loaded multiple times.

1 Like
3

Wow!

Now I see a chart there!

I already thought there would something else be wrong because I had problems with echarts too.

4

It is all working now :slight_smile:

  • chart.js via shortcode
  • chart.js with loading javascript via content file
  • echarts with loading javascript via content file

Loading local javascript files via frontmatter doesn’t work for me as it seems (js: /js/chart.js).
Would be just “nice to have”. But this of course is not a problem at all.

What I see is: when using two charts via shortcode there is no additional http request for loading the (locally stored) chart.js script - but the CPU time is much higher.

Beside that the chart via shortcode is not responsive out of the box in comparison to the basic implementation.

Can I avoid multiple script loadings for multiple charts when loading the chart.js script once via content file? As far I have tested this should work.
I guess I just need to load the javascript once and then create a new canvas for every chart.

If it worked like this I wouldn’t see advantages of the shortcode implementation by shen-yu in 2023 no more.

5

If you use a shortcode, place something like this in the head element of your baseof.html template

{{ if .HasShortcode "chart" }}
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{{ end }}

And you’ll get a unique canvas for each chart with something as simple as:

{{ $id := printf "chart-js-%d" .Ordinal }}
<div><canvas id="{{ $id }}"></canvas></div>
<script>
  var ctx = document.getElementById({{ $id }});
  new Chart(ctx, {{ .Inner | safeJS }} );
</script>

You could also consider bundling JS to serve yourself, but even compressed it’s a bit heavy at 200 KB.

1 Like
6

Thank you very much!
I’ll keep on going with the regular method I think.
But good to have that documented for others who are searching for these keywords.

I checked the pagespeed today.
I inserted 6 radar charts into one post to illustrate 4 different properties.
The local file delivery of chart.js adds 63kb of zipped data transfer.
The calculation of all charts adds in sum up additional 200 ms of CPU time.

For me it’s fine for that amount of charts enriching the other content.
Loading time for the whole document now takes ~1.0s for first view. I’m fine with that :slight_smile:

7

Loading from a CDN is not any more „regular“ than loading from your server. But the CDN method might create GDPDR issues similar to using Google fonts does.

2 Likes
8

Because of GDPR I do it locally.
My server is doing the job well for this purpose.
I would even go with echarts if there was a real benefit.