Including chart.js in my hugo site

support
1

Hi all,

I am able to get chart.js working by consuming some local JSON data, woohoo! However, I run into the problem of having to use:

<script src="/js/Chart.min.js"></script>

Before I set up the canvas and do the rendering of each chart. I cannot just include it once at the top of the markdown.

The rendered website is here: https://jamesbradburythesis.xyz/docs/data_bending/

Source can be seen here: https://github.com/jamesb93/phd-site-hugo/blob/master/content/docs/data_bending/_index.md

How can I just include the necessary js once?

2

backup html-head.html and put your script there

3

I am using the “book” theme from the Hugo themes and in the html-head.html there is this line:

<!-- Theme stylesheet, you can customize scss by creating `assets/custom.scss` in your website -->

{{- $styles := resources.Get "book.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}

<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">

Does that mean I should be editing a custom.scss file rather than the theme itself?

4

Also, I have noticed in the code if I do not include

<script src="/js/Chart.min.js"></script>

Immediately before the canvas, the output of Hugo will replace quotes with this:
&lsquo; and &rsquo;.

Which as I understand it is the same issue someone pointed out here:

Is this a problem with the theme then?

Again, here is the source:

5

I solved my problem by having a call to an external javascript, then using “safeJS” for the variables I passed to the external javascript. Problem with that is, we ain’t fixing it, we are just going around it. I wanted that javascript inline, not external.

6

Go to GitHub (link at top) and open an issue :wink: