Chartjs-Chart.js Vertically Aligned points on single x axis

by

0👍

The issue here is that the x-axis default type of a line chart is category. To turn this into linear, simply add type: 'linear' to the x-axis as follows:

options: {
  scales: {
    xAxes: [{
      type: 'linear',  
      ...

Please take a look at your amended code below and see how it works.

new Chart('myChart', {
  type: 'line',  
  data: {
    datasets: [{
      label: 'Dataset',
      data: [{ x: 0, y: 12 }, { x: 0, y: 11 }, { x: 0, y: 10 }],
      pointBackgroundColor: "rgba(193,46,12,0.5)",
      pointBordercolor: "rgba(193,46,12,1)",
      pointRadius: 5,
      fill: false,
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        gridLines: {},
        ticks: {
          suggestedMin: 0,
        }
      }],
      yAxes: [{        
        gridLines: {},
        ticks: {
          suggestedMin: 0,
          suggestedMax: 12,
          stepSize: 0.5
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

Leave a comment