Chartjs-ChartJS Arrays Acting as One Item

by

0👍

✅

This is happening because your PHP is returning an array for the labels and then you put that array in another array. This tells chart.js that it has to be a multiline label as you can see.
To get the behaviour you want you need to remove the array brackets at the labels field like so:

const time = <?php echo json_encode($time); ?>;
var canvasElement = document.getElementById("chart");

var config = {
   type: 'bar',
   data: {
      labels: time, // remove array brackets around time
      datasets: [{data:[10, 20]}],
   }
}

0👍

Assuming you want time_stamp as the X axis, and river_height as the Y axis, change to :

PHP :

while($row = mysqli_fetch_array($query)) {
   $data[] = [
      'x' => $row['time_stamp'],
      'y' => $row['river_height']
   ];
}

JavaScript :

var config = {
   type: 'bar',
   data: {
      datasets: [{
         data: <?= json_encode($data) ?>
      }]
   }
};

Leave a comment