Chartjs-How to move the x-axis values and line points to the middle of two x-axis lines using chartjs?

by

2👍

✅

Here is how you can do this :

ꜰɪʀꜱᴛ

Set default chart type to bar , like so :

var options = {
      type: 'bar',
      data: {
         ...

ꜱᴇᴄᴏɴᴅ

Set first dataset­‘s type to line , as such :

...
datasets: [{
         type: 'line',
         data: [26, 26, 29, 28, 29],
         ...

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

function myFunction() {
   var options = {
      type: 'bar',
      data: {
         labels: ["1", "2", "3", "4", "5"],
         datasets: [{
            type: 'line',
            data: [26, 26, 29, 28, 29],
            borderColor: 'rgba(0, 119, 220, 1)',
            borderWidth: 2,
            fill: false,
            lineTension: 0
         }, {
            data: [26, 26, 33, 28, 30],
            borderWidth: 2
         }]
      },
      options: {
         scales: {
            yAxes: [{
               display: false,
               ticks: {
                  suggestedMin: 0,
                  beginAtZero: true
               }
            }]
         }
      }
   }

   var ctx = document.getElementById('chartJSContainer').getContext('2d');
   new Chart(ctx, options);
}

myFunction();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chartJSContainer"></canvas>

Leave a comment