[Chartjs]-Why labels on x-asis does not shows well?

by

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>

Leave a comment