I'm using chart.js for first time and I'm facing problem in drawing graph. When I run this code, Graph axis are shown only but bars are not shown until I minimize or change browser window size. This is happening every time. Maybe this has to do with responsiveness. Any help about what I'm doing wrong here. I'm using visual studio and chrome for rendering graph.
let labels=[]
let duration=[]
let file="assets/duration.csv";
d3.csv(file).then(
function (loaddata) {
for (let i = 0; i < loaddata.length; i++) {
//console.log(loaddata.hours)
if (loaddata[i].hours != 0)
{
duration.push(loaddata[i].hours)
labels.push(loaddata[i].Trend)
}
}
//console.log(labels)
//console.log(duration)
}
);
let options={
type: 'bar',
responsive: true,
title: {
display:true,
text:'Duration of Trending Tweets'
},
data: {
labels:labels,
datasets:[{
data: duration,
label: 'Hours',
backgroundColor:["#3e95cd"]
}]
}
};
let chart=new Chart(document.getElementById('canvas'),options);<!DOCTYPE html>
<html lang="en">
<head>
<script src="chart.min.js"></script>
<script src ="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js">
</script>
<script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first website</title>
</head>
<body>
<h1>Hello world</h1>
<div>
<canvas id="canvas" style="position: relative; height:40vh; width:80vw">
</canvas>
</div>
<script src="index.js">
</script>
</body>
</html>The problem is that you create the chart before the CSV data is loaded. Be aware that the d3.csv request is processed asynchronously.
This can be solved by creating the chart only once the CSV data is fully loaded (at the end and inside of d3.csv(file).then( ... ).
An alternative approach is described in this answer.