CODEWITHSUNDEEP
javascriptreactjstypescriptrecharts
StandardProc
StandardProc

Reputation: 105

Modify the XAxis label in ReCharts

I have a Recharts Line graph, and the X-Axis has too many data points, and is looking very congested. Following is the current graph: enter image description here

Is there a way that I can rotate this text to lets say 270° so that all the labels would be visible?

Upvotes: 2

Views: 362

Answers (2)

ckifer
ckifer

Reputation: 284

Here is an example in codesandbox - link

  <XAxis
    dataKey="name"
    tick={{ textAnchor: "end" }}
    angle={-45}
  />

the tick object helps set attributes specific to the tick text that is rendered so we need to change the textAnchor there so the word ends at the tick line. And then of course set angle to a negative number so the labels are rotated in a way they can be read

Upvotes: 0

Vadim Sysoev
Vadim Sysoev

Reputation: 1

<XAxis
     ...other property
     angle={30}
  />

Upvotes: 0

Related Questions