# Loading javascript for chart.js

**URL:** <https://discourse.gohugo.io/t/loading-javascript-for-chart-js/17769>\
**Category:** support\
**Created:** [March 25, 2019, 3:44pm UTC](https://discourse.gohugo.io/t/loading-javascript-for-chart-js/17769 "2019-03-25T15:44:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![casperl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/casperl/32/7429_2.png) [@casperl](https://discourse.gohugo.io/u/casperl)\
**Post date:** [March 25, 2019, 3:44pm UTC](https://discourse.gohugo.io/t/loading-javascript-for-chart-js/17769/1 "2019-03-25T15:44:20Z")

</div>

I have more than one charts made with charts.js on a single page:

> **[Eskom Status 18 Maart, 2019](http://bitterbek.co.za/skrywes/eskom-status-190318/)**
>
> Die tragiese stand van Eskom se kragopwekking status op 18 Maart 2019

For every chart I created a shortcode that starts like this (injected in the html generated by the page.md file) and if I have two shortcodes loading two charts on the page listed above, I call the same libraries twice:

```
<script src="/chart.js/Chart.bundle.js"></script>

<canvas id="EskomStatus" width="300" height="400"></canvas>

<script>
  var ctx = document.getElementById('EskomStatus');
  var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Buite Werking', 'Onderhoud', 'Cahora Bassa', 'Gasturbines', 'Krag Opgewek'],
        datasets: [{
        label: 'Kraglewering',
        data: [17,5,1,2,23],

```

My concern is that I am loading the Chart.bundle.js numerous times for every shortcode that looks like the above. Or maybe not? Or it could depend on the local browser? I simply don’t know.

I could modify the theme and load Chart.bundle.js in the section of the theme, but then it loads for those pages without charts.

What will the best practice be here?

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [March 25, 2019, 5:23pm UTC](https://discourse.gohugo.io/t/loading-javascript-for-chart-js/17769/2 "2019-03-25T17:23:33Z")

</div>

Don’t worry

> [@Can someone explain preload block purpose?](https://discourse.gohugo.io/t/can-someone-explain-preload-block-purpose/17387):
>
> I am looking at block “preload” on line #1 here: and then it is used in main index.html file here: and I just understand what author is trying to accomplish. Can someone explain the importance of loading into .Scratch of key “paginator”. I also don’t understand the importance of empty {{with .Content}} block {{ block “preload” . }} {{ with .Content }}{{ end }} {{ end }} It is repeated in index. one more time. I based my code on this project and I am about to get rid of all of th…

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [March 25, 2019, 5:25pm UTC](https://discourse.gohugo.io/t/loading-javascript-for-chart-js/17769/3 "2019-03-25T17:25:18Z")

</div>

Don’t worry

some ideas [here](https://discourse.gohugo.io/t/can-someone-explain-preload-block-purpose/17387)

---

<div class="post-metadata">

**Author:** ![casperl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/casperl/32/7429_2.png) [@casperl](https://discourse.gohugo.io/u/casperl)\
**Post date:** [March 26, 2019, 9:44am UTC](https://discourse.gohugo.io/t/loading-javascript-for-chart-js/17769/4 "2019-03-26T09:44:56Z")

</div>

This might be a simple solution: a Shortcode called in the content HTML before the other shortcodes requiring the Javascript. Thus the shortcode `chartjs.html` loads the appropriate `chart.js` libraries as well as supported libraries before the shortcodes invoking charts are inserted. This has the additional benefit that should I wish to change between the minified Javascript source vs the full source, or load additional libraries, this is done in one place for the whole site. And the javascript is only inserted on those pages requiring the Javascript code.