9

So I have created this chart using recharts:

Is there a way to remove the YAxis line but keep the values visible? Like remove the line but keep 135, 190, etc.

<div className={styles.lineChart}>
  <h3 className={styles.title}>Body Weight</h3>
  <LineChart
    width={800}
    height={300}
    data={props.data}
    margin={{
      top: 5, right: 30, left: 20, bottom: 5,
    }}
  >
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="day" />
    <YAxis />
    <Tooltip />
    <Legend  layout="horizontal" verticalAlign="top" align="center"/>
    <Line type="monotone" dataKey="body weight" stroke="#57c0e8" activeDot={{ r: 8 }} />
  </LineChart>
</div>

2 Answers 2

25

To hide the YAxis line, you just need to use the props axisLine on the YAxis, and set it to false.

Like this:

<YAxis axisLine={false} />
2
  • Can you tell me how to hide the ticks but not the label?
    – Zullu
    Commented Nov 21, 2020 at 13:53
  • 5
    Use <YAxis tickLine={false} /> to remove the ticks as well. More documentation on the API for axis can be read here Commented Feb 2, 2021 at 11:15
2

Update: set tick to false

<XAxis tick={false} hide dataKey="name" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.