CODEWITHSUNDEEP
reactjsrecharts
devb
devb

Reputation: 327

How to change the label in recharts?

 <BarChart
      isAnimationActive={false}
        width={400}
        height={200}
        data={value}
        margin={{
          top: 5, right: 30, left: 20, 
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="x" 
        
        />
        <YAxis label={{ value: `no.`, angle: -90, position: 'insideBottomLeft' }} />
        <Tooltip
        content={<CustomTooltip />}
    />
   <Bar dataKey="y" /* fill={colors[0]} */ >
</BarChart>

My data on x axis is numerical [0,1,2,3...] but I want my ticks to be [A1,A2,A3...]

Upvotes: 2

Views: 2904

Answers (2)

J. Rayhan
J. Rayhan

Reputation: 111

Change your value key

const value = [
  {
    x: 'A1', ......
  },
  {
    x: 'A2', .....
  },
]

Or you can use this:

<XAxis 
  dataKey="x"
  tickFormatter={(t) => {
       const count = parseInt(t) + 1
       return 'A'+ count;
      }
  }
/>

Upvotes: 0

Taha LAGHZALI
Taha LAGHZALI

Reputation: 534

you can use formatter attribute, here is an example

<XAxis dataKey="x" tickFormatter={(t) => `A${t+1}`}   />

Upvotes: 2

Related Questions