Search code examples
reactjsrecharts

How to remove axis line from Rechart React graph?

How to remove line from x-axis to only have the values left for the UI?

<AreaChart
    data={data}
    margin={{
        top: 10,
        left: 0,
        bottom: 0,
    }}
  >
    <Tooltip />
    <XAxis dataKey="name"/>
    <Area type="monotone" dataKey="uv" stroke="#814587" strokeWidth={3} />
</AreaChart>
Solution

  • I found a solution by setting the tickLine and axisLine attributes of XAxis to false:

    <XAxis dataKey="name" tickLine={false} axisLine={false} />