3👍
So I don’t have enough reputation points to actually comment on the question. Try removing the background color attribute. It’s possible that the data from the first dataset is bigger than the second one.
I recently completed a dynamic multiline chart using php. My chart config is given below :
var lineChartData = { //chart config options
labels : [<?php echo '"'.$labelArray.'"'; ?>],
datasets : [<?php echo $dataString; ?>],
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, {
type:"line",
fill: false,
data:lineChartData,
options: {
scales: {
xAxes: [{
ticks: {
autoSkip : true,
min: 2,
maxTicksLimit: 10
}
}]
},
},
responsive:true
});
The $dataString
is the variable where I am passing all the data I’m retrieving from an external url
$dataString = $dataString."{label : '$name','fill' : 'false', data : [$br_values], borderColor : '$color', backgroundColor : 'transparent' },";
Let me know if I missed anything and sorry I did not answer this question sooner, I solved this 2 days ago. For more documentation on Chart.js go here
Kudos
- Chartjs-My charts doesn't work after inserting X-axis
- Chartjs-Change horizontal line chart to vertical line
Source:stackexchange.com