Chart.js: How do I increase the gap between lines in a multiline chart?

I am using v 3.8 of Chart.js library and the below is the code:

function createLineGraph(chartObject,chartId,data,labels,xLabel,yLabel) {
    // Create a new Chart.js instance
    var ctx = document.getElementById(chartId).getContext('2d');
    chartObject = new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: data
      },
  
      options: {
        responsive: true,
        scales: {
            x: {
              ticks:{
                  display: true,
                  autoSkip: true,
                  maxTicksLimit: 10,
              },
                title: {
                    display: true,
                    text: xLabel
                  },
                grid: {
                    display: false,
                    text: xLabel
                }
            },
            y: {
                  beginAtZero: true,
                  min: 0,
                  max: 200,
                  ticks: {
                    tickSpacing: 50,
                    autoSkip:true,
                  },
                  title: {
                      display: true,
                      text: yLabel
                    },
                  grid: {
                  display: false,                
              }
            }
          }
      }
    });
    chartObject.update();
  }

HTML

<canvas id="chart"></canvas>

Right now it displays like the below:

And Ideally, I am looking something like this:

Solution

You can make the visual area of the graph bigger, increasing the size of the Chart with CSS if possible. if that is not possible, you could:

move the legend to the side,

 plugins: {
     legend: {
         position: 'right',
     }
 },

Make the labels for the x-Axis shorter, since it is a datetime the best way would be setting the x-axis to type time (but you would have to add some libraies, checkout the documentation )

Here a demo, how I would do this:

const data = {
    labels: ['2023-01-01 00:00:00','2023-01-01 01:00:00','2023-01-01 02:00:00','2023-01-01 03:00:00','2023-01-01 05:00:00'], 
    datasets: [{
        label: 'Dataset 1',
        borderColor: '#36A2EB',
        backgroundColor: '#36A2EB',
        data: [50, 150, 180, 160, 10],
     },{
        label: 'Dataset 2',
        borderColor: '#FF6384',
        backgroundColor: '#FF6384',
        data: [20, 110, 80, 190, 20],
     }
     ,{
             label: 'Dataset 3',
        borderColor: '#4BC0C0',
        backgroundColor: '#4BC0C0',
        data: [190, 190, 160, 150, 130],
     }
     ,{
             label: 'Dataset 4',
        borderColor: '#FF9F40',
        backgroundColor: '#FF9F40',
        data: [100, 100, 150, 100, 100],
     }],
};

const config = {
     type: 'line',
    data: data,
    options: {
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'right',
            },
        },
         scales: {
            x: {
                type: 'time',
            }
        }
    }
};

const config1 = {
     type: 'line',
    data: data,
    options: {
        maintainAspectRatio: false,
    }
};

new Chart(
    document.getElementById('chart1'),
    config1
);

new Chart(
    document.getElementById('chart'),
    config
);

new Chart(
    document.getElementById('chart2'),
    config1
);

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script>     
<script src="//cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="//cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
  
  <h2>Before</h2>
  <div class="chart" style="height:184px; width:350px;">
    <canvas  id="chart1" ></canvas>
</div>


<h2>After<h2>
<div class="chart" style="height:184px; width:350px;">
    <canvas  id="chart" ></canvas>
</div>


<h2>Only changing the CSS height<h2>
<div class="chart" style="height:300px; width:350px;">
    <canvas  id="chart2" ></canvas>
</div>