如何调整react-chartjs-2中水平条形图的偏移量以匹配预期效果

以下是调整后的配置，可实现你期望的图表效果：

{
  type: 'bar',
  indexAxis: 'y',
  barThickness: 12,
  scales: {
    x: {
      suggestedMax: 6,
      suggestedMin: 0,
      grid: {
        display: false,
        drawBorder: false,
      },
      ticks: {
        stepSize: 2,
        callback: function (value, index, ticks) {
          return value ? value + 'h' : value;
        },
      }
    },
    y: {
      type: 'category',
      grid: {
        drawBorder: false,
        borderDash: [4, 3],
        color: "#C2C8CD",
        drawTicks: false,
        offset: false,
        drawOnChartArea: false, // 仅在Y轴区域绘制网格线，不穿过条形图区域
      },
      ticks: {
        align: 'left', // Y轴标签左对齐
        padding: 10, // 调整标签与条形的间距，匹配预期效果
      },
      offset: true, // 让条形与Y轴标签对齐，避免偏移
    }
  },
  plugins: {
    legend: {
      display: false // 隐藏图例（如果你的场景不需要）
    }
  }
}

关键修改点说明 #

• Y轴网格线调整：添加drawOnChartArea: false，让虚线网格线只显示在Y轴一侧，不穿过条形图区域，匹配期望效果的布局
• Y轴标签对齐：设置ticks.align: 'left'让标签左对齐，配合padding:10调整间距，保证视觉上的整齐
• 条形对齐：设置y.offset: true，解决条形与Y轴标签的偏移问题，让两者对齐
• 类型替换：用type: 'bar'替代horizontalBar，因为Chart.js v3+已将水平条形图整合到bar类型中，通过indexAxis: 'y'控制方向，react-chartjs-2通常基于新版本Chart.js，这样兼容性更好

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