(Chart.js) web page doesn't display chart, no error in console

Question

I'm new on chart.js and try to build something simple. I've not error in the console but chart doesn't display on my web page. I have no idea where it's from.

It would be really great if somebody could help.

<!DOCTYPE>
<html>
<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>

</head>

<body>

    <div id="center"><canvas id="canvas" width="600" height="400"></canvas></div>

  <script>


    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var datas = {
        labels: ["2010", "2011", "2012", "2013"],
        datasets: [
            {
                type: "line",
                data : [150,200,250,150],
                color:"#878BB6",
            },
            {
                type: "line",
                data : [250,100,150,10],
                color : "#4ACAB4",
            }
        ]
    }

  </script>
</body>
</html>

for me the problem was that i used the same canvas name on two places mistakenly which it why the chart was not showing. — Muhammad Waqar Anwar, May 18 '23 at 07:14

score 1 · Accepted Answer · answered Jun 27 '17 at 17:20

You are not constructing the chart correctly. Here is how it should be created ...

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var myChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ["2010", "2011", "2012", "2013"],
      datasets: [{
         label: 'Dataset 1',
         data: [150, 200, 250, 150],
         color: "#878BB6",
      }, {
         label: 'Dataset 2',
         data: [250, 100, 150, 10],
         color: "#4ACAB4",
      }]
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="center">
   <canvas id="canvas" width="600" height="400"></canvas>
</div>

To learn more about ChartJS, refer to the official documentation.

you right, I didn't built it the good way. Thank you very much ℊααnd — Kat, Jun 28 '17 at 08:28

(Chart.js) web page doesn't display chart, no error in console

1 Answers1