CODEWITHSUNDEEP
reactjsrecharts
Mar Mustafa
Mar Mustafa

Reputation: 21

Prevent Recharts Y-axis labels from wrapping

Currently my recharts labels are wrapping, I want to have specify a width so that they only wrap once that width has been exceeded. Right now each word is one it's own line, this is not what I want the behavior to be.

enter image description here

<BarChartWrapper>
    <BarChart
        layout="vertical"
        width={668}
        height={248}
        barCategoryGap={20}
        data={data}
        margin={{ top: 0, right: 50, bottom: 0, left: 50 }}
    >
        <CartesianGrid strokeDasharray="5" horizontal={false} stroke="#E7E7E7" />
        <XAxis
          label="(%)"
          // can also pass in a react component label={<CustomizedLabel />}
          tickLine={false}
          tickMargin={10}
          type="number"
          domain={[0, 90]}
        />
        {/* domain is max gonna be the max agreement + 10*/}
        <YAxis
          tick={{fontSize: 10, color: Colors.gray2}}
          tickLine={false}
          tickMargin={20}
          dataKey="name"
          type="category"
        />
        <Tooltip />
        <Bar dataKey="uv" barSize={24} fill="#009BAB" radius={[0, 4, 4, 0]} />
      </BarChart>
        </BarChartWrapper>

Upvotes: 2

Views: 10003

Answers (1)

nima
nima

Reputation: 8915

Unfortunately the Recharts YAxis tick doesn't have the whiteSpace property for customizing the tick property but you can change the YAxis width with the width property to enhance the text wrapping issue:

<YAxis
  tick={{fontSize: 10, color: Colors.gray2}}
  tickLine={false}
  tickMargin={20}
  dataKey="name"
  type="category"
  width={300}     // ----> here
/>

The default width value is 60. more information on rechart documentation.

Upvotes: 5

Related Questions