javascriptchart.js

How to remove extra paddings on top and bottom of bar chart in ChartJS?


I have created a single line stacked horizontal bar chart with ChartJS v4.4.4. Additionally, I disabled the legend display, made the point radius equal to 0. I also added negative padding for layout and disabled the display of the grid, border and ticks. In general, everything that is advised in such cases. But as a result, the diagram has extra paddings (marked red) at the top and bottom. How can they be removed?

let barChart = new Chart(document.getElementById("canvas"), {
  type: "bar",
  data: {
    labels: ["Bar"],
    datasets: [
      {
        label: "Account 1",
        backgroundColor: "#3e95cd",
        pointRadius: 0,
        data: [{ x: [0, 10], y: "Bar" }],
      },
      {
        label: "Account 2",
        backgroundColor: "#8e5ea2",
        pointRadius: 0,
        data: [{ x: [10, 15], y: "Bar" }],
      },
      {
        label: "Account 3",
        backgroundColor: "#3cba9f",
        pointRadius: 0,
        data: [{ x: [15, 20], y: "Bar" }],
      },
    ],
  },
  options: {
    indexAxis: "y",
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: {
        left: -8,
        bottom: -8,
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        stacked: true,
        border: {
          display: false,
        },
        ticks: {
          display: false,
        },
        grid: {
          display: false,
        },
      },
      x: {
        border: {
          display: false,
        },
        ticks: {
          display: false,
        },
        grid: {
          display: false,
        },
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: false,
      },
    },
  },
})
.chart {
  background: red;
}
<div class="chart">
  <canvas class="chart__canvas" id="canvas"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


Solution

  • Set both barPercentage and categoryPercentage in the option to 1 to make the bar fully occupied without padding/spacing.

    Reference: barPercentage vs categoryPercentage

    let barChart = new Chart(document.getElementById("canvas"), {
      type: "bar",
      data: ...,
      options: {
        ...,
        barPercentage: 1,
        categoryPercentage: 1,
      },
    });
    

    Demo @ StackBlitz