[Chartjs]-Padding not working in my chartjs line-graph

by

1👍

✅

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>

Leave a comment