[Chartjs]-Chart JS: Ignoring x values and putting point data on first available labels

by

9👍

✅

In that case, you don’t need to use labels array. Instead set x-axis’ type to linear and minimum and maximum value for x-axis’ ticks (perhaps stepSize as well) in your chart options, like so :

xAxes: [{
   type: 'linear',
   ticks: {
      suggestedMin: 0,
      suggestedMax: 10,
      stepSize: 2
   }
}]

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

myLineChart = new Chart(ctx, {
   type: 'line',
   data: {
      datasets: [{
         label: 'mylabel1',
         fill: false,
         backgroundColor: 'blue',
         borderColor: 'blue',
         data: [{
            x: 2.5,
            y: 85
         }, {
            x: 3.5,
            y: 85
         }]
      }]
   },
   options: {
      title: {
         display: true,
         text: 'mytitle1'
      },
      scales: {
         xAxes: [{
            type: 'linear',
            ticks: {
               suggestedMin: 0,
               suggestedMax: 10,
               stepSize: 2 //interval between ticks
            }
         }],
         yAxes: [{
            display: true,
            ticks: {
               suggestedMin: 70,
               suggestedMax: 100
            }
         }]
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Leave a comment