how to show custom values on x-axis in recharts?

user_14084892 0
Viewed 5091
 <LineChart
    width={400}
    height={200}
    data={data}
    margin={{
      top: 5, right: 30, left: 20, 
    }}
  >
    <CartesianGrid  />
    <XAxis dataKey="x" /* tick={false} *//>
    
    <YAxis  />
    <Tooltip content={tooltipContent}/>
    
    <Line type="monotone"  dataKey="y" strokeWidth={1} dot={false} activeDot={{ r: 5 }} />
    
  </LineChart>

my dataset includes just the decimal points(23.444,54.6665,..). I want to divide the axis into equal 10 halves (10,20,30,...100). How can I show these values on axis? below is the image of the chart [1]: https://i.stack.imgur.com/TatGP.png

recharts reactjs
1 Answers

To use custom values on the XAxis, or custom ticks, you need to use the following props on your XAxis component:

  • Specify the type of the values to number with type="number"
  • Supply the tick values ticks={[10, 20, 30, [...], 100]}
  • And the domain to specify the limits domain={[10, 100]}

In the end, your XAxis should look like this:

<XAxis
  dataKey="x"
  type="number"
  ticks={[10, 20, 30, [...], 100]}
  domain={[10, 100]}
/>
user_73214620
Related