如何在Chart.js柱状图中完全隐藏0值空柱子并消除X轴空白间隙

你不需要修改原有数据集结构，也不需要额外引入第三方插件，通过Chart.js原生的可脚本化配置即可实现需求，同时完全不会出现数据错位的问题：

核心实现逻辑 #

利用Chart.js支持的动态样式配置，判断每个柱子对应的值，如果为0或null时直接将柱子宽度设为0，既不会占用图表空间，也不会改变原有数据集的索引顺序。

完整配置示例 #

// 你的原有数据保持不变
const labels = [2019, 2020];
const data = {
    labels: labels,
    datasets: [{
        label: 'Dataset 1',
        data: ['0','0']
    },
    {
        label: 'Dataset 2',
        data: ['0', '300']
    },
    {
        label: 'Dataset 3',
        data: ['0','360']
    },
    {
        label: 'Dataset 4',
        data: ['0','0']
    },
    {
        label: 'Dataset 5',
        data: ['0','0'],
    },
    {
        label: 'Dataset 6',
        data: ['0', '1020']
    }]
};

// 新增/修改图表配置即可
const chartConfig = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    scales: {
      x: {
        grouped: true // 保持原有分组逻辑，避免数据错位
      },
      y: {
        beginAtZero: true
      }
    },
    datasets: {
      bar: {
        // 动态设置柱子宽度
        barThickness: (context) => {
          const currentValue = context.raw;
          // 0值、null值的柱子宽度设为0，不占用空间
          if (Number(currentValue) === 0 || currentValue === null) {
            return 0;
          }
          // 正常柱子用自适应宽度，也可指定固定像素值比如20
          return 'flex';
        }
      }
    },
    plugins: {
      legend: {
        // 可选配置：隐藏全为0值的数据集图例
        labels: {
          filter: (legendItem, chartData) => {
            const targetDataset = chartData.datasets[legendItem.datasetIndex];
            return targetDataset.data.some(val => Number(val) !== 0 && val !== null);
          }
        }
      }
    }
  }
};

// 初始化图表
const myChart = new Chart(
  document.getElementById('yourChartContainerId'),
  chartConfig
);

版本适配说明 #

• 上述配置适用于Chart.js 3.x、4.x版本
• 如果你使用的是2.x版本，只需要把barThickness的动态配置放到每个dataset的属性中即可，其他逻辑保持一致

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