Padding inside the canvas with a line chart without scale

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
                }

              }]
            }

          }
        });

Author: Fantashit

4 thoughts on “Padding inside the canvas with a line chart without scale

  1. 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
          }
        }]
      }
    }
  2. 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
              }
            }],
          },
  3. 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;

    nayttokuva 2017-04-02 kello 16 16 34

  4. 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
                }
            }
        }
    });
    

Comments are closed.