Js Chart does not work,saying variable has not been declared

Asked

Viewed 89 times

-1

Good personal night, when executing the code below it says: "Uncaught Referenceerror: Chart is not defined" I have tried several modes, however that seemed the most logical. I would like help with examples if possible, since I thank you.

new Chart(document.getElementById('myChart'), {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [
          {
            
            backgroundColor: ["#2DFF24", "#808080","#FF0000","#FFE699","#B67558"],
            data: values
          }
        ]
      },
      options: {
        title: {
          display: true,
          text:'Computadores'
        }
    } 
}); 
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
    
    </head>
  <body>   
      <<div class="row">
        <div class="col-xs-1-12">
          <div class="card">
            <div class="card-body">
              <h3 class="card-title">PC World</h3>
              <p class="card-text">SUa melhor loja de PC's</p>
            </div>
          </div>
        </div>
        <div class="col-xs-1-12">
          <div class="card">
            <div class="card-body">
              <h3 class="card-title">Title</h3>
              <p class="card-text">Text</p>
            </div>
          </div>
        </div>
      </div>
<div class="row">
    <div class="col-4"> 
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>
</div>
      
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  
    <script href="https://stacksnippets.net/js"></script>
    <script src="script.js"></script>

javascript html ajax web-application chartjs

  • Where are you setting "Chart"?

  • Hi, that’s the problem before it worked like this now it doesn’t work anymore,.

1 answer

1


The big mistake I realize is the lack of the tag <script> to the Chartjs.

Step by step for proper functioning:

  1. Download the Chartjs

  2. Enter the tag script to the address where you saved the Chart.js file BEFORE from your script (example: <script src="./chart.min.js"></script>

Browser other questions tagged javascript html ajax web-application chartjs

You are not signed in. Login or sign up in order to post.