Chart.js: Padding inside the canvas with a line chart without scale

[gagagast]

Hello,
How can i make the line graph stick to the exact border of the canvas ?
I 've made a line graph without scales and there are always a gap between the left and the bottom borders of the canvas and the beginning of the charts... I try to play with the responsive and the maintainAspectRatio options without success... here is my configuration .

Thx

new Chart(ctx, {
          // responsive: false,
          type: 'line',
          // maintainAspectRatio:false,
          data: {
            labels: labels,
            datasets: [{
              fill:true,
              backgroundColor: "#47afbd",
              data: data
            }]
          },
          options: {
            defaultFontSize:10,
            animation:{
              onProgress:function(){
                if(self.$('#engagement-chart-wrap').hasClass('isLoading')){
                  self.$('#engagement-chart-wrap').removeClass('isLoading');
                }
              }
            },
            legend: {
              display: false
            },
            tooltips:{
              enabled:false
            },
            elements:{
              point:{
                radius:0
              }
            },
            scales: {

              yAxes: [{

                ticks :{
                  display:false,
                  padding:0
                },
                gridLines:{
                  drawTicks:false,
                  drawBorder:false
                },
                scaleLabel:{
                  display:false
                }

              }],
              xAxes: [{
                ticks :{
                  display:false,
                  padding:0

                },
                gridLines:{
                  display:false,
                  drawTicks:false,
                  drawBorder:false
                }

              }]
            }

          }
        });

[Davy-F]

I'm also getting padding issues without a scale. But mine are out of range.
How can we add padding to the canvas? (Chart v2)

With scale. e.g.

xAxes: [{
            display: true

Without e.g.

xAxes: [{
            display: false

Only seems to happen when both x and y axis display is equal to false.

[Davy-F]

Anything?

[etimberg]

There are currently no options to do this. If someone wants to submit a PR, I can look at it

[Davy-F]

Thanks for the reply. Isn't this a bug, rather than an option though?

[etimberg]

Possibly. But it might be a duplicate of #2768

[gagagast]

Not Really... My chart appears always inside the limits but doesn't fill the canvas element.

[etimberg]

I found the bug here. It's that the gridLines.tickMarkLength is still used even if drawTicks is false. Until this is fixed, this is a good work around

options: {
  scales: {
    yAxes: [{
      gridLines: {
        tickMarkLength: 0
      }
    }]
  }
}

[carlesnunez]

I was not able to make work the chart with @etimberg configuration. Instead I set to display none all the lines of my chart:

      scales: {
        xAxes: [{
        gridLines: {
          display: false,
          drawBorder: false,
        },
        scaleLabel: {
          display: false
        },
        ticks: {
          display: false
        }
        }],
        yAxes: [{
          gridLines: {
            display: false,
            drawBorder: false
          },
          scaleLabel: {
            display: false
          },
          ticks: {
            display: false
          }
        }],
      },

[ryana]

@carlesnunez's solution partially worked for me. I'm still running into an issue on the top of the chart.

^ Sides and bottom not cut off

^ Top cut off :(

I'll post back when we figure it out, but if anyone else could help, I'm all ears.

[ryana]

FYI I just realized that I can dynamically set yAxes.0.ticks.max to be a little greater than the max value in my dataset and it fixes this even with yAxes.0.ticks.display is false.

[rishabhjain]

Adding negative left and bottom layout padding(http://www.chartjs.org/docs/#chart-configuration-layout-configuration) seems to be working.

[ezekg]

I'm still hitting this issue. Padding does not fix it. I'm having to dynamically adjust the yAxes ticks min/max by ~5, as @ryana had mentioned earlier.

const min = Math.min(...data)
const max = Math.max(...data)

options.scales.yAxes[0].ticks.min = min - 5
options.scales.yAxes[0].ticks.max = max + 5

Before

After

[groenroos]

I also still face this issue, and no padding setting seems to address it. I also continually modify the data in the chart, so keeping track of setting the minimum and maximum tick is a non-workable workaround for me.

options: {
    maintainAspectRatio: false,
    legend: {
        display: false
    },
    tooltips: {
        enabled: false
    },
    scales: {
        xAxes: [{
            display: false
        }],
        yAxes: [{
            display: false
        }]
    }
}

This configuration yields a chart where the top and bottom are partly cut off;

[kadnan]

Anyone able to sort this out?

[thisentirecitymustbepurged]

So is it still not possible to make the graph completely fill the canvas element without losing the gridlines or using some other hack? I am using chart.js 2.6.0 and the graph does not scale to the edges of the canvas element, which makes it an aesthetical pain.

[tkarpenko]

Adding the layout padding works for me

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 10,
                bottom: 10
            }
        }
    }
});

[miry]

I have similar problem (at least I think): The top grid line is cut. Version: chart.[email protected]

As you see the line on top with 100% value is cut by half and points have holes in the center.

My workaround:

options: {
      scales: {
        yAxes: [{
          ticks: {
            min: 0,
            max: 105,
            callback: function(value, index, values) {
              if (value == 105) {
                return '';
              }
              return value + '%';
            }
          }
        }]
      }
    }

It looks like:

To be perfect I would remove the last grid line for 105. Do you know if it is possible?

[anthonylan]

Adding the layout padding works for me

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 10,
                bottom: 10
            }
        }
    }
});

It worked! Thanks alot