I am currently troubleshooting why my data isn't appearing on the chart. It seems like the issue might be related to ticks, although I can't be certain. Strangely, there are no errors showing up in the console, even though all the data is being retrieved correctly. Perhaps there's something wrong with the options settings that I have overlooked. Despite attempting to follow the documentation and sample code provided, I'm still unable to get it working.
To provide some context, the chart is located within a Vue component and is intended to show the number of open and closed tickets per day over a 2-month period. The data is passed into the component through props.
You can see how the chart looks at the moment: https://i.sstatic.net/I6mut.png
Below is the current code for the chart:
export default {
props:['created', 'closed','labels'],
mounted() {
require('chart.js');
Chart.defaults.global.defaultFontColor = "#fff";
Chart.defaults.global.defaultFontFamily = "Roboto";
console.log(this.labels);
console.log(this.closed);
console.log(this.created);
var mychart = new Chart(document.getElementById("chart"), {
type: 'line',
maintainAspectRation:true,
labels: this.labels,
data: {
datasets: [{
fill: false,
label: 'Tickets Created',
backgroundColor: '#e52d27',
data: this.created
},
{
fill: false,
label: 'Tickets Closed',
backgroundColor: '#00FF58',
data: this.closed
},
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Ticket Trend'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
},
ticks: {
min: 0,
max: 20,
}
}]
}
}
});
}
}
And here are the values of this.labels:
["12-05-18", "12-06-18", "12-07-18", "12-10-18", "12-11-18", "12-12-18",
"12-13-18", "12-14-18", "12-17-18", "12-18-18", "12-19-18", "12-20-18",
"12-21-18", "12-24-18", "12-25-18", "12-26-18", "12-27-18", "12-28-18",
"12-31-18", "01-01-19", "01-02-19", "01-03-19", "01-04-19", "01-07-19",
"01-08-19", "01-09-19", "01-10-19", "01-11-19", "01-14-19", "01-15-19",
"01-16-19", "01-17-19", "01-18-19", "01-21-19", "01-22-19", "01-23-19",
"01-24-19", "01-25-19", "01-28-19", "01-29-19", "01-30-19", "01-31-19",
"02-01-19", "02-04-19"]
this.closed:
[0, 0, 0, 0, 10, 0, 0, 0, 0, 10, 0, 20, 10, 0, 0, 0, 0, 0, 0, 0, 20, 0, 0,
3, 0, 0, 0, 0, 0, 0, 0, 2, 1, 0, 0, 0, 6, 0, 0, 2, 0, 0, 0, 0]
this.created:
[0, 0, 0, 0, 0, 0, 20, 0, 0, 0, 0, 0, 10, 0, 0, 0, 0, 0, 0, 2, 0, 0, 20, 0,
0, 0, 0, 0, 10, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]