CODEWITHSUNDEEP
reactjsrecharts
Evgeniy
Evgeniy

Reputation: 3349

How to prevent breaking axis long labels in React Recharts?

I'am using React Recharts (http://recharts.org/en-US/) to show some chart data and I need to show formatted values nearby axis. Axis values is separated by spaces, for example 1 000 000 $. React Recharts is breaking values into separate lines

enter image description here

enter image description here

How to prevent breaking labels and show it fully at the same line?

Upvotes: 1

Views: 4134

Answers (2)

Rahul Bagad
Rahul Bagad

Reputation: 123

You can specify the width for tick For example,

<YAxis tick={{ width: 75 }} tickFormatter={formatter} domain={yDomain} allowDataOverflow/>

Upvotes: 2

Nolence
Nolence

Reputation: 2254

Have you tried using a tick formatter? I tried to reproduce your problem but it couldn't.

Here is a re-purposed chart that is working just fine for me.

<ResponsiveContainer height={400} width="100%">
    <ComposedChart
      height={400}
      width="100%"
      margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
    >
      <CartesianGrid />
      <XAxis dataKey="name" />
      <YAxis
        unit="$"
        dataKey="y"
        tickFormatter={val => val.toLocaleString().replace(/,/g, " ")}
      />
      <Scatter
        name="A school"
        data={[
          { name: "Jill", y: 3000000 },
          { name: "Eve", y: 5000000 },
          { name: "Audrey", y: 1000000 },
          { name: "Jaqueline", y: 7000000 }
        ]}
        fill="#8884d8"
      />
      <Tooltip />
    </ComposedChart>
  </ResponsiveContainer>

Let me know if misunderstood your question.

Upvotes: 2

Related Questions