Skip to content
Advertisement

Remove padding from chartjs bar chart canvas

I want to create a single stacked bar chart with Chart.js that shows how close someone is to a certain amount of money. To define this amount I put a dotted line on top of the chart.

The problem is however that the canvas of this chart has some unwanted padding. So the line spills over outside of the chart. How can I remove this padding on the left and right side?

I tried with negative padding as suggested in another post, but this doesn’t remove the padding.

const options = {
    layout: {
      padding: -40,
    },
  };

Code sandbox: https://codesandbox.io/s/romantic-paper-kfu6o7?file=/src/App.js

enter image description here

enter image description here

Advertisement

Answer

Try setting barPercentage & categoryPercentage values to 1 inside options like below. Here is updated Code sandbox https://codesandbox.io/s/winter-wind-xdcuxu?file=/src/App.js

const options = {
    barPercentage: 1,
    categoryPercentage: 1
   
    // Your existing properties
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement