如何修改Recharts中正负条形图的默认断点（从0改为100）

Recharts的条形图默认以0作为正负条形的分界点，要改成以100为断点，最可行的方案就是你想到的数据偏移+显示修正，具体实现步骤如下：

• 数据预处理
  将所有数据值减去100，这样原本等于100的数值会变为0（条形的基准点），低于100的数值转为负数（条形向左延伸），高于100的转为正数（条形向右延伸）。
  示例：

  // 原始数据
  const originalData = [
    { name: 'Item 1', value: 85 },
    { name: 'Item 2', value: 110 },
    { name: 'Item 3', value: 100 }
  ];
  // 处理后的数据
  const processedData = originalData.map(item => ({
    ...item,
    value: item.value - 100
  }));
  

• 修正坐标轴刻度显示
  使用坐标轴的tickFormatter属性，把刻度值加回100，让轴上显示的是原始数值：

  // 如果是水平条形图，用XAxis；垂直条形图用YAxis
  <XAxis
    tickFormatter={(tickValue) => tickValue + 100}
  />
  

• 修正条形标签显示
  如果需要在条形上展示原始数值，给Bar组件的label配置formatter：

  <Bar
    dataKey="value"
    label={{
      position: 'outside',
      formatter: (value) => value + 100
    }}
  />
  

这种方法逻辑简单，完全适配Recharts的现有API，能精准实现你需要的100为断点的正负条形效果。

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