react-chartjs-2如何配置实现HorizontalBar水平条形图右对齐

问题原因 #

原有配置中给x轴设置position: 'right'仅会移动x轴本身的显示位置，不会改变条形的绘制方向，默认配置下水平条形会以x轴0值为起点（容器最左侧）向右绘制，因此无法实现右对齐效果。

核心修改逻辑 #

给x轴添加reverse: true配置，反转x轴的数值方向，让x轴0值基线移动到容器最右侧，条形自然会从右向左延伸，实现右对齐效果。

修正后完整代码 #

<HorizontalBar
  options={{
    legend: {
      display: false,
    },
    tooltips: {
      enabled: false,
    },
    hover: {
      mode: null,
    },
    scales: {
      xAxes: [
        {
          display: false,
          gridLines: {
            color: "rgba(0, 0, 0, 0)",
          },
          // 核心配置：反转x轴实现右对齐
          reverse: true,
          ticks: {
            min: 0, // 固定x轴最小值为0，避免反转后出现负数值区间
          }
        },
      ],
      yAxes: [
        {
          position: "right",
          ticks: {
            reverse: true,
          },
          gridLines: {
            color: "rgba(0, 0, 0, 0)",
          },
        },
      ],
    },
    plugins: {
      tooltip: {
        enabled: false,
      },
    },
  }}
  data={{
    datasets: [
      {
        label: "My First dataset 2",
        borderWidth: 0,
        backgroundColor: [
          "#68B68A",
          "#5B9FC9",
          "#83C39F",
          "#85B7D6",
          "#9FD1B4",
          "#C2DAEB",
        ],
        data: /* 替换为你的实际业务数据 */,
        barPercentage: 0.5,
      },
    ],
  }}
/>

版本适配说明 #

如果你使用的是Chart.js v3及以上版本（对应react-chartjs-2 v4+），scales配置结构有更新，需要将反转配置写到新的结构中，示例如下：

scales: {
  x: {
    display: false,
    reverse: true,
    min: 0,
    grid: {
      color: "rgba(0, 0, 0, 0)"
    }
  },
  y: {
    position: "right",
    reverse: true,
    grid: {
      color: "rgba(0, 0, 0, 0)"
    }
  }
}

效果参考 #

• 预期右对齐效果：
• 修改前默认效果：

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