Recharts：设置X轴标签空白

Question

如何设置X轴和标签（之间的空白在我的情况“DD.MM.YY”

这是我AreaChart？

<AreaChart 
     width={600} 
     height={400} 
     data={data} 
     connectNulls={true} 
     margin={{top: 20, left: 120, bottom: 20}}> 
     <defs> 
      <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1"> 
       <stop offset="5%" stopColor="#2198F3" stopOpacity={1}/> 
       <stop offset="95%" stopColor="#4BABF4" stopOpacity={0.6}/> 
      </linearGradient> 
     </defs> 
     <Area 
      dot={{ stroke: '#2196f3', strokeWidth: 4, r: 7, fill: 'white'}} 
      type='monotone' 
      dataKey='value' 
      stroke='#2196f3' 
      strokeWidth='4' 
      fill='url(#colorUv)' 
     /> 
     <XAxis dataKey="name" /> 
     <YAxis orientation="right" /> 
     <CartesianGrid strokeDasharray="3 3"/> 
     <Tooltip/> 
    </AreaChart> 

PS recharts标签不可！

Answer 1

1）创建CustomizedXAxisTick

const CustomizedXAxisTick = React.createClass({ 
render() { 
    const {x, y, payload} = this.props; 
    return (
     <g transform={`translate(${x},${y})`}> 
      <text x={-10} y={30} 
        textAnchor="start" 
        fill="#666">{payload.value}</text> 
     </g> 
    ); 
} 
}); 

2）设置X轴刻度：

<XAxis 
    dataKey="name" 
    tick={<CustomizedXAxisTick/>} 
/>