Why labels on x-asis does not shows well? - chart.js

Question

Here is my div with canvas for line chart:
<div
x-data="{
lineChartLabels: #entangle('lineChartLabels'),
lineChartData: #entangle('lineChartData'),
init() {
const labels = `${this.lineChartLabels}`;
const data = {
labels: labels,
datasets: [{
backgroundColor: 'lightblue',
data: this.lineChartData,
fill: true,
label: `{{__('site.report.values')}}`,
}]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
ticks: {
callback: function (value) {
const date = new Date(Number(value) * 1000);
return date.toISOString().substring(11,23);
}
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function (context) {
const date = new Date(Number(context.formattedValue) * 1000);
return date.toISOString().substring(11,23);
}
}
}
}
}
};
const myChart = new Chart(
this.$refs.canvas,
config
);
Livewire.on('updateTheChart', () => {
myChart.destroy();
myChart.data.datasets[0].data = this.lineChartData;
myChart.data.labels = this.lineChartLabels;
myChart.update();
})
}
}">
<canvas id="myChart" x-ref="canvas" style="height: 33vh;width: 50vw;"></canvas>
</div>
And here is an example of values(which represent seconds):
[49.66,47.26,46.88,49.81]
and for x axis which represents dates:
["04-Feb-17","06-May-17","28-Oct-17","20-Dec-17"]
But when it renders it shows like this:
Can somebody tell me why chartjs does not show x-asis in the proper way and how to fix it?

Answer 1

The problem is this line const labels = `${this.lineChartLabels}`; you are creating a script, what you need ist the array, so with other words: const labels = this.lineChartLabels; remove the string interpolation.
Disclaimer: I'm guessing abit, because I'm not acquainted with laravel-livewire and alpine.js, but that line of code looks like the culprit to me.
Here the two different Version, side by side:
const labels = ["04-Feb-17","06-May-17","28-Oct-17","20-Dec-17"];
const data = {
labels: labels,
datasets: [{
backgroundColor: 'lightblue',
data: [49.66,47.26,46.88,49.81],
fill: true,
label: `Correct Version`,
}]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
ticks: {
callback: function (value) {
const date = new Date(Number(value) * 1000);
return date.toISOString().substring(11,23);
}
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function (context) {
const date = new Date(Number(context.formattedValue) * 1000);
return date.toISOString().substring(11,23);
}
}
}
}
}
};
new Chart(
document.getElementById('chart'),
config
);
config.data.labels = `${["04-Feb-17","06-May-17","28-Oct-17","20-Dec-17"]}`;
config.data.datasets[0].label = `Incorrect Version`;
let chart2 = new Chart(
document.getElementById('chart2'),
config
);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart" style="float:left;height:184px; width:300px;font-family: Arial">
<canvas id="chart" ></canvas>
</div>
<div class="chart" style="float:left;height:184px; width:300px;font-family: Arial">
<canvas id="chart2" ></canvas>
</div>