Search code examples
chart.jslaravel-livewirealpine.js

Why labels on x-asis does not shows well?

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: results

Can somebody tell me why chartjs does not show x-asis in the proper way and how to fix it?

Solution

  • 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>