使用Recharts绘制柱状图时双轴刻度超出SVG范围该如何解决？

可按照以下优先级逐一尝试解决：

• 调整图表外层容器的内边距
  BarChart/LineChart等图表根组件的margin参数默认预留空间较小，刻度文字较长时就会出现溢出，可手动增大对应方向的预留值：

  <BarChart
    width={500}
    height={300}
    data={data}
    // 按需增大对应方向的数值，比如Y轴刻度宽就增大left，X轴刻度高就增大bottom
    margin={{
      top: 10,
      right: 10,
      left: 40,
      bottom: 50,
    }}
  >
  {/* 其余图表内容 */}
  </BarChart>
  

• 自定义坐标轴的尺寸与刻度样式
  如果X轴文字过长，可设置倾斜角度、预留足够高度；如果Y轴数字过长，可直接设置Y轴宽度：

  {/* X轴配置 */}
  <XAxis
    dataKey="category"
    tick={{fontSize: 12}}
    tickMargin={8} // 刻度和轴线的间距
    angle={-45} // 文字倾斜避免横向占用过多空间
    textAnchor="end" // 倾斜后对齐方式
    height={60} // 给X轴预留足够高度容纳倾斜文字
  />
  
  {/* Y轴配置 */}
  <YAxis
    tick={{fontSize: 12}}
    tickMargin={8}
    width={45} // 手动设置Y轴宽度，容纳长数字/带单位的刻度
  />
  

• 裁剪过长的刻度内容
  若刻度本身文字长度不可控，可通过tickFormatter方法对内容做缩略处理：

  // X轴长文本缩略
  <XAxis
    dataKey="name"
    tickFormatter={(val) => val.length > 6 ? `${val.slice(0,6)}...` : val}
  />
  
  // Y轴大数字简化
  <YAxis
    tickFormatter={(val) => val >= 1000 ? `${(val/1000).toFixed(1)}k` : val}
  />
  

• 检查外层容器尺寸合理性
  若使用ResponsiveContainer做响应式适配，需确保它的父元素有明确的宽高值，避免图表尺寸计算异常导致刻度溢出。

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