如何解决Chart.js柱状图中空柱占用宽度问题，实现柱子相对标签居中

你可以通过以下配置实现存在的柱子在对应标签下居中显示，方案适配Chart.js 3.x及以上版本：

1. 核心是开启skipNull配置，让空值的柱子不占用分类宽度，配合x轴的偏移和占比配置调整居中效果，完整示例配置如下：

const chartConfig = {
  type: 'bar',
  data: {
    labels: ["一月", "二月", "三月", "四月", "五月"],
    datasets: [
      {
        label: "绿色系列",
        data: [20, 30, null, null, 15],
        skipNull: true, // 空值不渲染也不占用宽度
        backgroundColor: "green"
      },
      {
        label: "蓝色系列",
        data: [null, null, 25, 40, null],
        skipNull: true,
        backgroundColor: "blue"
      },
      {
        label: "粉色系列",
        data: [18, null, null, 22, 35],
        skipNull: true,
        backgroundColor: "pink"
      },
      {
        label: "黄色系列",
        data: [null, 28, 32, null, null],
        skipNull: true,
        backgroundColor: "yellow"
      }
    ]
  },
  options: {
    scales: {
      x: {
        offset: true, // 分类两端留出空白，避免边缘柱子贴边
        categoryPercentage: 0.7, // 所有柱子总宽度占分类宽度的比例，可按需调整
        barPercentage: 0.9 // 单根柱子占分配宽度的比例
      }
    }
  }
}

2. 如果你使用的是Chart.js 2.x版本，没有原生skipNull配置，可以通过动态过滤数据集的方式实现：每次渲染前把对应分类下为空的系列临时设置hidden: true，渲染后再恢复，也能实现空柱不占位的效果。

原始问题示例图：

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