如何让Recharts散点图右侧Y轴始终显示100%刻度？

我用Recharts制作了如下散点图：

右侧Y轴代表百分比，当前显示的数值符合预期，但我希望调整设置，让该轴始终显示100%刻度，请问是否可行？

当前实现方式为使用两个几乎完全相同的数据集，其中一个设置为隐藏状态，通过ticks回调函数基于数据点中的最大Y值计算百分比并展示。

当前数据集配置 #

datasets: [
  {
    label,
    data: data
      ? Array.from({ length: data.x.values.length || 0 }, (_, i) => ({
          x: data.x.values[i],
          y: data.y.values[i],
        }))
      : [],
    backgroundColor: color,
    borderColor: color,
    pointRadius: 1.2,
    fill: false,
  },
  {
    data: data
      ? Array.from({ length: data.x.values.length || 0 }, (_, i) => ({
          x: data.x.values[i],
          y: data.y.values[i],
        }))
      : [],
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    pointRadius: 0,
    fill: false,
    yAxisID: 'y1',
  },
],

当前刻度配置 #

scales: {
  x: {
    title: {
      display: true,
      text: data?.x.title || '',
    },
    ticks: {
      callback: formatPlotTicks,
    },
  },
  y: {
    title: {
      display: true,
      text: data?.y.title || '',
    },
    type: 'linear',
    display: true,
    position: 'left',
    ticks: {
      callback: formatPlotTicks,
    },
  },
  y1: {
    type: 'linear',
    display: true,
    position: 'right',
    ticks: {
      callback: (value) => {
        const percentageValue = ((value as number) / maxYValue) * 100;
        if (percentageValue > 100.5) {
          return '';
        }
        return `${percentageValue.toFixed(0)}%`;
      },
    },
  },
},

完全可行，你可以通过以下两种方式实现右侧Y轴始终显示100%刻度：

方式一：手动指定固定刻度列表 #

直接在y1轴的配置中锁定刻度范围，并手动指定包含100%对应值的刻度：

// 先确保正确计算数据的最大Y值
const maxYValue = data ? Math.max(...data.y.values) : 0;

scales: {
  // ... 保留其他轴配置
  y1: {
    type: 'linear',
    display: true,
    position: 'right',
    min: 0,
    max: maxYValue, // 强制轴范围对应0%到100%
    ticks: {
      callback: (value) => {
        const percentageValue = ((value as number) / maxYValue) * 100;
        return `${percentageValue.toFixed(0)}%`;
      },
      // 手动指定刻度值，确保100%对应的maxYValue被包含
      values: [0, maxYValue / 2, maxYValue]
    },
  },
},

方式二：动态补全100%刻度 #

如果需要保留自动生成的其他刻度，同时强制添加100%刻度，可使用afterBuildTicks钩子：

const maxYValue = data ? Math.max(...data.y.values) : 0;

scales: {
  // ... 保留其他轴配置
  y1: {
    type: 'linear',
    display: true,
    position: 'right',
    min: 0,
    max: maxYValue,
    ticks: {
      callback: (value) => {
        const percentageValue = ((value as number) / maxYValue) * 100;
        if (percentageValue > 100.5) {
          return '';
        }
        return `${percentageValue.toFixed(0)}%`;
      },
    },
    // 构建刻度后检查，缺失100%刻度则补全
    afterBuildTicks: (axis) => {
      const hasMaxTick = axis.ticks.some(tick => tick.value === maxYValue);
      if (!hasMaxTick) {
        axis.ticks.push({ value: maxYValue });
        axis.ticks.sort((a, b) => a.value - b.value); // 保持刻度顺序
      }
    }
  },
},

关键注意点 #

• 必须确保maxYValue是从数据集中正确计算出的最大Y值，否则百分比转换会出错。
• 设置min:0和max:maxYValue可以避免轴范围超出0%-100%的区间。

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