CODEWITHSUNDEEP
javascriptreactjsrecharts
Dev
Dev

Reputation: 533

Selecting an interval on the Y-Axis in Recharts

In the YAxis I require it to be 0 1000 2000 3000, requiring an interval of 1000 but what I get is 0 2500 5000 7500 10000 Please let me know how to set the interval

data = [
  {
    "name": "Jan 2021",
    "Product A": 3432,
    "Procuct B": 2342
  },
  {
    "name": "Feb 2021",
    "Product A": 2342,
    "Procuct B": 3246
  },
  {
    "name": "Mar 2021",
    "Product A": 4565,
    "Procuct B": 4556
  },
  {
    "name": "Apr 2021",
    "Product A": 6654,
    "Procuct B": 4465
  },
  {
    "name": "May 2021",
    "Product A": 8765,
    "Procuct B": 4553
  }
];

render() {
  return (
    <LineChart width={730} height={250} data={this.data}>
      {/* <CartesianGrid strokeDasharray="3 3" /> */}
      <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>

      <XAxis dataKey="name" />
      <YAxis type="number" domain={[0, 10000]}/>
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="Product A" stroke="#0095FF" />
      <Line type="monotone" dataKey="Procuct B" stroke="#FF0000" />
    </LineChart>
  );
};

Thanks for the help

Output enter image description here

Upvotes: 1

Views: 4301

Answers (1)

Orlyyn
Orlyyn

Reputation: 2606

On an axis, there are 5 ticks by default.

In order to display all the thousands ticks (1000, 2000, etc.), you need to set the tickCount on your YAxis to 11, like the following:

<YAxis type="number" domain={[0, 10000]} tickCount={11} />

But you'll also need to make the chart's height bigger, otherwise all the ticks cannot be displaied properly. To do that, you could just update the height prop in the LineChart component:

<LineChart width={730} height={500} data={data}> // <-- just here
  <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
  <YAxis type="number" domain={[0, 10000]} tickCount={11}/>
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="Product A" stroke="#0095FF" />
  <Line type="monotone" dataKey="Procuct B" stroke="#FF0000" />
</LineChart>

Which would result like the image below:

Upvotes: 1

Related Questions