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