图表：设置X轴标签边距 [英] Recharts: Setting X-Axis Label Margin

问题描述

如何设置X轴和标签之间的边距（在我的情况下为 dd.mm.yy？

How can I set the margin between X-Axis and the label (in my case 'dd.mm.yy' ?

这是我的AreaChart：

That is my 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>

p.s。 recharts-tag不可用！

p.s. recharts-tag is not available!

推荐答案

1）创建CustomizedXAxisTick

1) Create an 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）设置XAxis刻度：

2) Set XAxis tick:

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

这篇关于图表：设置X轴标签边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！