Recharts: how to custome XAxis label's position

[p2227]

i try to add css

.recharts-cartesian-axis-label {
        position: relative;
        left: -100px;
        top: -9999px;
        color:red;
    }

but it not work

[p2227]

i resolve it by using transform: translate
is there a better way ?

[xile611]

transform is a good way to change the postition of label. Because we can only use css to change some presentation attributes, but we can't change the position attributes such as x, y in css.

.recharts-cartesian-axis-label text {
  fill: red;
}

Another way is to set label into a function, or react element.

const renderLabel = (props) => {
    const { x, y, width, height } = props;

  return (
    <text x={x + width / 2} y={y - 10} className="customized-x-axis-label">Anything</text>
  );
};
const SimpleLineChart = React.createClass({
    render () {
    return (
        <LineChart width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <XAxis dataKey="name" label={renderLabel}/>
       <YAxis/>
       <CartesianGrid strokeDasharray="3 3"/>
       <Tooltip/>
       <Legend />
       <Line type="monotone" dataKey="pv" stroke="#8884d8" />
       <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    );
  }
})

http://jsfiddle.net/sh2bLsh2/

[p2227]

thanks! i may have to learn some base of svg