如何移除Chart.js 4.2.1版本中图表周围的空白区域？

针对你遇到的Chart.js 4.2.1版本半环形图表周围存在空白的问题，按以下步骤修改即可解决：

1. 移除图表布局内边距 #

在图表配置的options中添加layout项，将内边距设为0，消除图表内部的默认空白：

options: {
  rotation: -90,
  cutout: "85%",
  circumference: 180,
  radius: "100%", // 改成100%让图表填满可用空间
  responsive: false,
  layout: {
    padding: 0 // 移除布局内边距
  }
}

2. 固定Canvas尺寸（因responsive: false） #

由于关闭了响应式，需要明确设置Canvas的宽高，避免默认尺寸导致的空白。修改展示代码：

<div style="margin: 0; padding: 0;">
  <canvas
    id="chart"
    use:addChart={{value}}
    width="200"
    height="100"
    style="margin: 0; padding: 0;"
  >
  </canvas>
</div>

注：半环形图表的高度建议设为宽度的一半，匹配circumference: 180的半圆形态。

3. 清除容器默认样式 #

给包裹Canvas的div添加margin: 0; padding: 0;，避免容器自带的边距产生空白。

修改后的完整图表配置代码 #

import { Chart } from "chart.js/auto"
import { curvePlugin, textPlugin } from "./plugins"

type ChartGauge = typeof Chart

export interface Props {
  // 后续可添加更多属性
  value: number
}

export const addChart = (node: HTMLElement, params: Props): ChartGauge => {
  const text = textPlugin(params)
  const curve = curvePlugin()
  return new Chart(node, {
    type: "doughnut",
    data: {
      datasets: [
        {
          data: [params.value, 100 - params.value],
          backgroundColor: ["#056DFF", "#D9D9D9"],
          borderColor: ["rgba(255, 255, 255 ,1)"],
          borderWidth: 0,
        },
      ],
    },
    options: {
      rotation: -90,
      cutout: "85%",
      circumference: 180,
      radius: "100%",
      responsive: false,
      layout: {
        padding: 0
      }
    },
    plugins: [text, curve],
  })
}

这些修改针对Chart.js 4.x版本的特性，直接解决布局空白问题，无需依赖旧版本的解决方案。

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