Search code examples
chartschart.js2

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


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>

Solution

  • 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.