Chart.js v4.5.1柱状图Y轴左侧出现冗余内容如何解决？

问题原因 #

你遇到的Y轴左侧出现多余区域的问题，根源在于esbuild配置里的mangleProps: /^_/选项——该规则会混淆所有以下划线开头的属性，而Chart.js内部大量依赖下划线开头的私有属性实现正常渲染逻辑，这个配置直接破坏了Chart.js的内部运行机制，导致布局异常。

解决方法 #

方案1：直接移除属性混淆配置 #

删除esbuild.mjs中的mangleProps: /^_/选项即可，修改后的配置如下：

import * as esbuild from "esbuild";

await esbuild.build({
  entryPoints: ["./src/js/*.ts"],
  bundle: true,
  splitting: true,
  minify: false,
  outdir: "./dist/assets/js/",
  format: "esm",
  target: ['es2020']
});

方案2：保留混淆但排除第三方依赖 #

如果需要保留属性混淆功能，可通过filter选项限定只处理你自己的业务代码，排除node_modules中的第三方库（比如Chart.js），配置示例：

import * as esbuild from "esbuild";

await esbuild.build({
  entryPoints: ["./src/js/*.ts"],
  bundle: true,
  splitting: true,
  minify: false,
  mangleProps: /^_/,
  filter: /^[^.]+\.ts$/, // 仅处理本地ts文件，排除依赖库代码
  outdir: "./dist/assets/js/",
  format: "esm",
  target: ['es2020']
});

验证效果 #

修改配置后重新构建项目，Chart.js柱状图即可恢复正常渲染，左侧的多余区域会消失，达成你预期的展示效果。

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