Charts js only showing 2 data points on sparkline style charts that has 24 data points. Is this a chart size issue? I have another chart based of the same data that works fine... is this a tool tip issue or a sizing issue? I cannot seem to get this to display all the data. I have tried many configs but he problem persists. Thanks!
var style = {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
bodySpacing: 1,
mode: "nearest",
intersect: 0,
position: "nearest",
xPadding: 2,
yPadding: 2,
caretPadding: 5,
},
hover: {mode: null},
responsive: false,
scales: {
yAxes: [{
ticks: {
display: false
},
gridLines: 0,
gridLines: {
zeroLineColor: "transparent",
drawTicks: false,
display: false,
drawBorder: false
}
}],
xAxes: [{
display: 0,
gridLines: 0,
ticks: {
display: false
},
gridLines: {
zeroLineColor: "transparent",
drawTicks: false,
display: false,
drawBorder: false
}
}]
},
layout: {
padding: {left: 10, right: 10, top: 10, bottom: 10}
}
};
var config = {
type: 'line',
responsive: true,
data: {
datasets: [{
label: "",
borderColor: "#80b6f4",
pointBorderColor: "#FFF",
pointBackgroundColor: "#18ce0f",
pointBorderWidth: 1,
pointHoverRadius: 2,
pointHoverBorderWidth: 1,
pointRadius: 1,
fill: true,
backgroundColor:gradientFill,
borderWidth: 2,
scaleFontColor: "#FFF",
fontColor: "#FFF",
data: cleandata,
drawBorder: true,
}]
},
options: {
layout: {
padding: {
left: 5,
right: 5,
top:5,
bottom: 5
}
}
},
options: style
}
showChart = new Chart(ctx , config);
});
I found the issue. I was not passing my Labels data correctly. It should have been passed as such:
data: {
labels: labels,
datasets: [{
etc...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With