title: Chart is not defined, chart.js in javascript template
body: <p>I'm having some trouble getting charts to show up. I get the error &quot;chart is not defined&quot; although it seems to be defined when I hover over it in my javascript template. Here's my code:</p>
  <p>javascript file</p>
  <pre><code>var myChart = new Chart(&quot;myChart&quot;, {
    type: &quot;bar&quot;,
    data: {
      labels: [&quot;Lag 1&quot;, &quot;Lag 2&quot;],
      data: [10, 5],
      backgroundColor: [&quot;red&quot;, &quot;green&quot;]
    },
    options: {}
  });
  </code></pre>
  <p>html file</p>
  <pre><code>&lt;div&gt;
  &lt;link href=&quot;{% static 'main/formwrapper.css' %}&quot; rel=&quot;stylesheet&quot; /&gt;
    &lt;div class=&quot;desktop1-formwrapper&quot;&gt;
      &lt;div class=&quot;desktop1-frame2&quot;&gt;
          &lt;canvas id=&quot;myChart&quot; style=&quot;width: 60%&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div class=&quot;desktop1-frame1&quot;&gt;&lt;/div&gt;
      &lt;button class=&quot;desktop1-buttondefault&quot;&gt;
        &lt;span class=&quot;desktop1-text3&quot;&gt;Nästa runda&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>the base html file which I extend, and where I have my links to javascript template and chart.js</p>
  <pre><code>    &lt;script src=&quot;{% static 'main/dropDownToggle.js' %}&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;
           src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js&quot;&gt;
      &lt;/script&gt;
  </code></pre>
  <p>I'm probably missing something simple, but I can't figure it out, thankful for some advice!</p>
  <p>Update. Entire base.html where I link javascript</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  
  {% load static %}
  
  &lt;html lang=&quot;english&quot;&gt;
    &lt;head&gt;
      &lt;title&gt;Med Andra Ord&lt;/title&gt;
  
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta property=&quot;twitter:card&quot; content=&quot;summary_large_image&quot; /&gt;
      &lt;style data-tag=&quot;reset-style-sheet&quot;&gt;
        html {  line-height: 1.15;}body {  margin: 0;}* {  box-sizing: border-box;  border-width: 0;  border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6 {  margin: 0;  padding: 0;}button,input,optgroup,select,textarea {  font-family: inherit;  font-size: 100%;  line-height: 1.15;  margin: 0;}button,select {  text-transform: none;}button,[type=&quot;button&quot;],[type=&quot;reset&quot;],[type=&quot;submit&quot;] {  -webkit-appearance: button;}button::-moz-focus-inner,[type=&quot;button&quot;]::-moz-focus-inner,[type=&quot;reset&quot;]::-moz-focus-inner,[type=&quot;submit&quot;]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focus,[type=&quot;button&quot;]:-moz-focus,[type=&quot;reset&quot;]:-moz-focus,[type=&quot;submit&quot;]:-moz-focus {  outline: 1px dotted ButtonText;}a {  color: inherit;  text-decoration: inherit;}input {  padding: 2px 4px;}img {  display: block;}html { scroll-behavior: smooth  }
      &lt;/style&gt;
      &lt;style data-tag=&quot;default-style-sheet&quot;&gt;
        html {
          font-family: Inter;
          font-size: 16px;
        }
  
        body {
          font-weight: 400;
          font-style:normal;
          text-decoration: none;
          text-transform: none;
          letter-spacing: normal;
          line-height: 1.15;
          color: var(--dl-color-gray-black);
          background-color: var(--dl-color-gray-white);
  
        }
      &lt;/style&gt;
      &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&amp;display=swap&quot;
        data-tag=&quot;font&quot;
      /&gt;
      &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&amp;display=swap&quot;
        data-tag=&quot;font&quot;
      /&gt;
      &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&amp;display=swap&quot;
        data-tag=&quot;font&quot;
      /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{% static 'main/style.css' %}&quot; /&gt;
      &lt;script src=&quot;{% static 'main/dropDownToggle.js' %}&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;
           src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js&quot;&gt;
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div&gt;
        &lt;link href=&quot;{% static 'main/desktop1.css' %}&quot; rel=&quot;stylesheet&quot; /&gt;
  
        &lt;div class=&quot;desktop1-container&quot;&gt;
          &lt;div class=&quot;desktop1-desktop1&quot;&gt;
            &lt;span class=&quot;desktop1-text&quot;&gt;
              &lt;span class=&quot;desktop1-text01&quot;&gt;MED ANDRA&lt;/span&gt;
              &lt;span class=&quot;desktop1-text02&quot;&gt;ORD&lt;/span&gt;
            &lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    {% block content %}{% endblock %}
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>