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

Question

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:

@winner_joiner thanks. Can you pls help here too? https://stackoverflow.com/questions/75180940/how-to-show-label-with-each-line-in-chart-js-v3 — Volatil3, Jan 20 '23 at 07:28
I will look into it, but is it not more or less the same as this question https://stackoverflow.com/questions/75180447/how-do-i-show-labels-along-with-lines-in-chart-js-v3/75181110#75181110 ? — winner_joiner, Jan 20 '23 at 07:55

winner_joiner · Accepted Answer · 2023-01-20T05:44:03.067

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>

score -1 · Answer 2 · answered Jan 19 '23 at 20:04

I haven't worked with chart.js for some time but as far as I can see the height of the two charts is different, so because of that the line gap is so narrow there. Try experimenting with styling so that you can increase the height and I think that the gap will increase as well.

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

2 Answers2