Chartjs-ChartJS: line graph with labels on the y-axis

by

0👍

✅

First you should define the values for the vertical axis in the chart configuratoin parameter data.yLabels.

Then you define the yAxis as a category cartesian axis.

Further, you need to define the xAxis as a time cartesian axis. Make sure also that the data of your dataset is defined as individual points through objects containing x and y properties.

Note that Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.

Please have a look at below runnable code sample.

new Chart(document.getElementById('myChart'), {
  type: 'line',  
  data: {
    yLabels: ['Suspended',  'Faulty', 'At-risk', 'Unknown', 'Healthy'],
    datasets: [{
      label: 'My Dataset',
      data: [
        { x: '20:28', y: 'Healthy' },
        { x: '20:47', y: 'Healthy' }
      ],
      backgroundColor: 'lightblue',
      borderColor: 'blue',
      fill: false
    }]
  },
  options: {
    responsive: true,
    title: {
      display: false
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        type: 'category',
        ticks: {
          reverse: true,
		    },
        gridLines: {
          zeroLineColor: 'rgba(0, 0, 0, 0.1)'
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          parser: 'HH:mm',
          unit: 'minute',
          stepSize: 5,
          tooltipFormat: 'HH:mm'
        },
        ticks: {
          min: '20:25',
          max: '20:50',
          padding: 10
		    },
        gridLines: {
          display: false
        }
      }],
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>

Leave a comment