Chart is not defined, chart.js in javascript template-CodePudding

I'm having some trouble getting charts to show up. I get the error "chart is not defined" although it seems to be defined when I hover over it in my javascript template. Here's my code:

javascript file

var myChart = new Chart("myChart", {
  type: "bar",
  data: {
    labels: ["Lag 1", "Lag 2"],
    data: [10, 5],
    backgroundColor: ["red", "green"]
  },
  options: {}
});

html file

<div>
<link href="{% static 'main/formwrapper.css' %}" rel="stylesheet" />
  <div >
    <div >
        <canvas id="myChart" style="width: 60%"></canvas>
    </div>
    <div ></div>
    <button >
      <span >Nästa runda</span>
    </button>
  </div>
</div>

the base html file which I extend, and where I have my links to javascript template and chart.js

    <script src="{% static 'main/dropDownToggle.js' %}"></script>
    <script type="text/javascript"
         src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js">
    </script>

I'm probably missing something simple, but I can't figure it out, thankful for some advice!

Update. Entire base.html where I link javascript

<!DOCTYPE html>

{% load static %}

<html lang="english">
  <head>
    <title>Med Andra Ord</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta property="twitter:card" content="summary_large_image" />
    <style data-tag="reset-style-sheet">
      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="button"],[type="reset"],[type="submit"] {  -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus {  outline: 1px dotted ButtonText;}a {  color: inherit;  text-decoration: inherit;}input {  padding: 2px 4px;}img {  display: block;}html { scroll-behavior: smooth  }
    </style>
    <style data-tag="default-style-sheet">
      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);

      }
    </style>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
      data-tag="font"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
      data-tag="font"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"
      data-tag="font"
    />
    <link rel="stylesheet" href="{% static 'main/style.css' %}" />
    <script src="{% static 'main/dropDownToggle.js' %}"></script>
    <script type="text/javascript"
         src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js">
    </script>
  </head>
  <body>
    <div>
      <link href="{% static 'main/desktop1.css' %}" rel="stylesheet" />

      <div >
        <div >
          <span >
            <span >MED ANDRA</span>
            <span >ORD</span>
          </span>
        </div>
      </div>
    </div>
  {% block content %}{% endblock %}
  </body>
</html>

CodePudding user response：

This should work.

<!DOCTYPE html>

{% load static %}

<html lang="english">
  <head>
    <title>Med Andra Ord</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta property="twitter:card" content="summary_large_image" />
    <style data-tag="reset-style-sheet">
      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="button"],[type="reset"],[type="submit"] {  -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus {  outline: 1px dotted ButtonText;}a {  color: inherit;  text-decoration: inherit;}input {  padding: 2px 4px;}img {  display: block;}html { scroll-behavior: smooth  }
    </style>
    <style data-tag="default-style-sheet">
      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);

      }
    </style>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
      data-tag="font"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
      data-tag="font"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"
      data-tag="font"
    />
    <link rel="stylesheet" href="{% static 'main/style.css' %}" />
    <script src="{% static 'main/dropDownToggle.js' %}"></script>
    <script type="text/javascript"
         src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js">
    </script>
  </head>
  <body>
    <div>
      <link href="{% static 'main/desktop1.css' %}" rel="stylesheet" />

      <div >
        <div >
          <span >
            <span >MED ANDRA</span>
            <span >ORD</span>
          </span>
        </div>
      </div>
    </div>

    <div>
      <link href="{% static 'main/formwrapper.css' %}" rel="stylesheet" />
        <div >
          <div >
              <canvas id="myChart" style="width: 60%"></canvas>
          </div>
          <div ></div>
          <button >
            <span >Nästa runda</span>
          </button>
        </div>
      </div>
  {% block content %}{% endblock %}

  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["Lag 1", "Lag 2"],
        datasets: [{
          label: '# of Votes',
          data: [10, 5],
          backgroundColor: [
            "red", "green"
          ],
        }]
      },
      options: {}
    });
  </script>
  </body>
</html>