padding not working in my chartjs line-graph

Question

I'm using the newest version of chart.js (3.2.1). Padding works if I'm set it to positive values. But padding 0 (or negative values) doesn't set the line graph exactly at the borders of canvas

options: {

        layout: {
            padding:0
        },
        interaction: {
            intersect: false,
        },
        plugins: {
            tooltip: {
                backgroundColor: 'transparent',
                displayColors: false,
                bodyFontSize: 14,
                titleColor: 'rgba(83,255,228,1)',
                callbacks: {
                    label: function (tooltipItems, data) {
                        return 'BMI: ' + tooltipItems.raw;
                    }
                }
            },
            legend: {
                display: false,
            },
        },
        elements: {
            point: {
                radius: 6,
                hitRadius: 6,
                hoverRadius: 6
            }
        },
        scales: {
            xAxes: {
                display: false,
            },
            yAxes: {
                display: false,
                
            },
        }
    }

score 1 · Accepted Answer · answered May 14 '21 at 12:02

The padding in the chart config is not for styling of the canvas to other elements, the only thing the padding does is adding the ability of making a bit of space between the canvas edge and the line, from the image you provided it seems like it goes to the end of the canvas and the empty space is another element beneath the canvas.

As you can see in this example, the canvas background is colored gray and with padding: 0 the line touches the end of the canvas as expected

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        backgroundColor: 'transparent',
        displayColors: false,
        bodyFontSize: 14,
        titleColor: 'rgba(83,255,228,1)',
        callbacks: {
          label: function(tooltipItems, data) {
            return 'BMI: ' + tooltipItems.raw;
          }
        }
      },
      legend: {
        display: false,
      },
    },
    interaction: {
      intersect: false,
    },
    layout: {
      padding: 0
    },
    elements: {
      point: {
        radius: 0
      }
    },
    scales: {
      y: {
        display: false
      },
      x: {
        display: false
      }
    }
  }
}

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

canvas {
  background-color: #eee;
}

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js" integrity="sha512-opXrgVcTHsEVdBUZqTPlW9S8+99hNbaHmXtAdXXc61OUU6gOII5ku/PzZFqexHXc3hnK8IrJKHo+T7O4GRIJcw==" crossorigin="anonymous"></script>
</body>

i made my canvas like yours canvas { background-color: #eee; } and its the same issue — snooq, May 14 '21 at 12:11
Can you share a reproducable sample then because as you can see with a minimalistic example it just works — LeeLenalee, May 14 '21 at 12:15

padding not working in my chartjs line-graph

1 Answers1