Chartjs-Can we generate a chart something like this with chart js?

by

0👍

I don’t know if it will help you, but i tried to recreate one of the example you gave.

Instead of inverting the axes, I put the different sleep types on the y axis.
Since chartjs doesn’t really accept strings on the Y axis, I used a callback function to replace the labels on the Y axis with values from the yLabels array.

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.1.1/dist/chart.umd.min.js"></script>
<canvas id="myCanva"></canvas>

var ctx = document.getElementById('myCanva').getContext('2d');
var yLabels = ["REM", "Light", "Deep", "Awake"]

var cfg = {
  type:'line',
  data:{
    datasets: [{
      data: [
        {x: '0', y: '0'},{x: '1', y: '0'},{x: '1', y: '3'},{x: '4', y: '3'},{x: '4', y: '2'},{x: '5', y: '2'},{x: '5', y: '1'},{x: '8', y: '1'},{x: '8', y: '0'}
      ]
    }]
  },
  options:{
   scales: {
      y: {
        min:0,
        max:3,
        ticks: {
          stepSize: 1,
          callback: function(index) {
            return yLabels[index];
          },
        }
      }
    }
  }
}

var myChart = new Chart(ctx,cfg);

Here’s a codepen link

Also, here’s the Chartjs ticks configuration documentation if you want to learn more about it

Leave a comment