Couldn't understand what "type" property of <XAxis /> and <YAxis /> does

[M-o-h-a-n-S-i-n-g-h]

Hey Folks!,

I was going through the <SimpleBarChart /> component and I need to make the chart to vertical layout.
After changing the type prop of both <XAxis /> and <YAxis /> component it actually worked.

But eager to know what actually does the type prop does. There is no detailed docs for this in the API section of <XAxis /> and <YAxis />

Thanks in Advance!!

[Yilun-Sun]

Hi @M-o-h-a-n-S-i-n-g-h ! Sorry that this is not explained in detail in the document. We are improving the document recently. Thank you for your question！

The key is to set the type of the two axes after you set the layout.
The default type for XAxis is 'category', and 'number' for YAxis in a normal BarChart. So if you made a vertical-layout BarChart, it treats XAxis as the numeric one and YAxis will be the categorical one, so you have to switch the type properties you passed too!

So the code will be:

<BarChart
  width={500}
  height={300}
  data={data}
  margin={{
    top: 5,
    right: 30,
    left: 20,
    bottom: 5,
  }}
  layout="vertical"
>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis type="number" />
  <YAxis type="category" dataKey="name" />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" fill="#8884d8" />
  <Bar dataKey="uv" fill="#82ca9d" />
</BarChart>

And there you go!

[M-o-h-a-n-S-i-n-g-h]

Hi @Yilun-Sun, Thanks for the explanation, got the point.