Chart.js does not appear in html

Asked

Viewed 23 times

-1

Good morning guys, I recently decided to implement Chart.js in some of my projects, but it does not show me the data.

I am leaving below the test source code that is not displayed.

    <!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<canvas class="line-chart"></canvas>
<!-- CHART JS IMPORT -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<script>
  var ctx = document.getElementsByClassName("line-chart")

  // Type, Data e options

  var ChartGraph = new chart(ctx, {

    type:'line'
    data:{
      labels: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun","Jul", "Ago", "Set", "Out", "Nov", "Dez"],
      datasets: [{
        label: "Taxa de Cliques - 2020",
        data: [5,10,5,14,20,15,6,14,8,12,15,5,10],
        borderWidth: 6,
        borderColor: 'rgba(77,166,253,0.85)',
        backgroundColor: 'transparent',
      }]

    }
  })

</script>
</body>
</html>
javascript chartjs

1 answer

1


There are two errors in the code:

var ctx = document.getElementsByClassName("line-chart")

var ChartGraph = new Chart(ctx, {
    type:'line',
    data:{
      labels: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun","Jul", "Ago", "Set", "Out", "Nov", "Dez"],
      datasets: [{
        label: "Taxa de Cliques - 2020",
        data: [5,10,5,14,20,15,6,14,8,12,15,5,10],
        borderWidth: 6,
        borderColor: 'rgba(77,166,253,0.85)',
        backgroundColor: 'transparent',
      }]

    }
  })
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas class="line-chart"></canvas>

  • Thanks brother, solved my problem!

  • good, do not forget to accept the answer ;)

Browser other questions tagged javascript chartjs

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