If I set true to YAxisProps['reversed'], The YAxis minimum value is not displayed

[taqm]

If I set true to YAxisProps['reversed'], The YAxis minimum value is not displayed.

The graph on the right does not show 0 on the y-axis

Is this what intended? And, How do I display value?

(XAxis have the same problem.

Example

https://codesandbox.io/s/recharts-playground-8t6bg

[xile611]

Sorry for not handling your issue in time, please try the latest version. If the problem persists, please open a new issue according to the issue guide.

[vincent-kradev]

encountered this bug, in v2.11.0 . any workarounds or fixes??

[Dib5pm]

Solution

This will fix this issue when using the reversed prop on the YAxis. If you notice that the axes are getting cut off or not displaying fully, you can add some margins to the chart to fix this. Here’s how you can set it up:

margin={{
  top: 10,
  right: 30,
  left: 0,
  bottom: 0,
}}

Full example

import React, { PureComponent } from 'react';
import { BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

export default class Example extends PureComponent {
  static demoUrl = 'https://codesandbox.io/s/simple-bar-chart-tpz8r';

  render() {
    return (
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          width={500}
          height={300}
          data={data}
          margin={{
            top: 10,
            right: 30,
            left: 0,
            bottom: 0,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis reversed={true} />
          <Tooltip />
          <Legend />
          <Bar dataKey="pv" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue" />} />
          <Bar dataKey="uv" fill="#82ca9d" activeBar={<Rectangle fill="gold" stroke="purple" />} />
        </BarChart>
      </ResponsiveContainer>
    );
  }
}