如何移除Chart.js无坐标轴条形图的周边空白区域？

我希望单独展示条形图中的单条柱子，已经隐藏了坐标轴及其刻度，但图表左侧、顶部/底部仍存在来自坐标轴和图例的空白区域。请问有没有无需为元素设置负边距的方法来移除这些空白？我试过用负padding，但对图表的顶部和底部无效。

水平堆叠条形图组件代码 #

<template>
  <div style="width: 100%; height: 100%">
    <canvas :id="id" width="100%" height="100%"></canvas>
  </div>
</template>
<script>
import { defineComponent, onMounted } from "vue"
import Chart from "chart.js/auto"
import ChartDataLabels from "chartjs-plugin-datalabels"

export default defineComponent({
  props: {
    kind: {
      /**
       * @example: 'single', 'stacked'
       */
      type: String,
      default: "stacked",
    },
    color: {
      type: String,
      default: "rgba(255, 99, 132, 1)",
    },
    labels: {
      type: Array,
      default: () => ["S1", "S2", "S4", "S6"],
    },
    datasets: {
      type: Array,
      default: () => [
        {
          label: "va_value",
          data: [80, 10, 60, 50],
          backgroundColor: "#11DCB5",
          borderColor: "transparent",
          barThickness: 20,
          minBarLength: 4,
          // 确保值为0时也能显示最小长度的柱子
        },
        {
          label: "nva_value",
          data: [20, 0, 40, 0],
          backgroundColor: "#CA2F4B",
          borderColor: "transparent",
          barThickness: 20,
          minBarLength: 4,
        },
      ],
    },
  },
  setup(props, context) {
    const id = Math.random().toString()
    onMounted(() => {
      Chart.register(ChartDataLabels)
      const ctx = document.getElementById(id)
      const myChart = new Chart(ctx, {
        type: "bar",
        data: {
          labels: props.labels,
          datasets: props.datasets,
        },
        options: {
           layout: {
              padding: {
                left: -20,
                bottom: -20,
                top: -20
              }
            },
          plugins: {
            legend: {
              display: false,
            },
            datalabels: {
              formatter: function (value) {
                return props.kind === "stacked" ? `${value}s` : `${value}%`
              },
              color: "#fff",
              anchor: "center",
              align: "center",
              font: {
                weight: "bold",
              },
            },
          },
          responsive: true,
          maintainAspectRatio: false,
          indexAxis: "y",
          scales: {
            y: {
              beginAtZero: true,
              stacked: true,
              ticks: {
                color: "#fff",
              },
              grid: {
                drawBorder: false,
                display: false,
              },
            },
            x: {
              display: props.kind === "stacked" ? true : false,
              beginAtZero: true,
              stacked: true,
              ticks: {
                color: "#fff",
              },
              grid: {
                drawBorder: false,
                display: false,
              },
              title: {
                display: true,
                text: props.kind === "stacked" ? "Step Time (s)" : "",
                color: "#fff",
              },
            },
          },
        },
      })
    })
    return { id }
  },
})
</script>
<style lang=""></style>

解决方案（无需负边距） #

以下是几个官方推荐的配置调整，能彻底移除多余空白：

• 完全隐藏不需要的坐标轴：如果不需要y轴的标签和刻度，直接把scales.y.display设为false，Chart.js就不会为这个坐标轴预留任何空间，这是解决左侧空白的关键。
• 关闭坐标轴的偏移：给x轴和y轴都加上offset: false，取消Chart.js默认在柱子和图表边缘之间添加的间距。
• 重置布局padding为0：去掉负padding，把layout.padding的所有方向都设为0，负padding是非官方用法，容易导致渲染异常。
• 确保容器尺寸明确：保持responsive: true和maintainAspectRatio: false的同时，父容器必须有明确的宽高（比如固定像素或百分比），避免Chart.js自动计算多余空间。

修改后的核心配置代码如下：

options: {
  layout: {
    padding: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    }
  },
  plugins: {
    legend: {
      display: false
    },
    datalabels: {
      formatter: function (value) {
        return props.kind === "stacked" ? `${value}s` : `${value}%`
      },
      color: "#fff",
      anchor: "center",
      align: "center",
      font: {
        weight: "bold",
      },
    },
  },
  responsive: true,
  maintainAspectRatio: false,
  indexAxis: "y",
  scales: {
    y: {
      display: false, // 完全隐藏y轴，彻底消除左侧空白
      stacked: true,
      offset: false // 取消柱子与边缘的默认间距
    },
    x: {
      display: props.kind === "stacked" ? true : false,
      stacked: true,
      offset: false,
      beginAtZero: true,
      ticks: {
        color: "#fff",
      },
      grid: {
        drawBorder: false,
        display: false,
      },
      title: {
        display: true,
        text: props.kind === "stacked" ? "Step Time (s)" : "",
        color: "#fff",
      },
    }
  }
}

如果需要保留y轴标签但移除左侧空白，可以调整y轴的以下配置，而不是直接隐藏：

y: {
  stacked: true,
  offset: false,
  ticks: {
    color: "#fff",
    padding: 0 // 取消刻度标签的内边距
  },
  grid: {
    drawBorder: false,
    display: false,
    drawTicks: false // 不绘制刻度线，避免预留空间
  },
  padding: 0 // 取消坐标轴的内边距
}

内容的提问来源于stack exchange，提问作者LovelyAndy