Bar overflowing with custom domain and margin

[Lueton]

Reproduction link

Steps to reproduce

Open the sandbox

What is expected?

I would expect the purple bar to stop at the end of the chart. It should not overflow the chart container and respect the margin

What is actually happening?

The margin does not get respected and the bar is overflowing

Environment	Info
Recharts	v2.12.2
React	16.8.6
System	Windows
Browser	Edge, Chrome

[ckifer]

interesting, it looks like top margin is the issue here. Wonder why this had never been found previously...

Commenting out top: 100, "fixes" this, but looks like this is just a long time bug.

@HHongSeungWoo @PavelVanecek fyi if anyone wants to look into this one (during refactoring or otherwise)

[Lueton]

interesting, it looks like top margin is the issue here. Wonder why this had never been found previously...

Commenting out top: 100, "fixes" this, but looks like this is just a long time bug.

@HHongSeungWoo @PavelVanecek fyi if anyone wants to look into this one (during refactoring or otherwise)

Im using Recharts for several years, but I actually found this problem when writing my own chart component, which had the same problem. Was curious how Recharts solved this problem. For me, the problem was about the same. If you have a custom domain (like in my example) or limit, but don't limit the bar size to the given limit it will just overflow. This is not visible until you have a margin because obviously you cant draw outside the svg. But adding a margin makes the overflow visible.

[ckifer]

Makes sense. We would probably put a clip on the top of the chart boundary, inclusive of margin. Looks like right now there is no clip (or anything else) and therefore, as you say it just overflows.

[tannerdolby]

Setting allowDataOverflow={true} on the YAxis makes needClip true in the render method of Bar.tsx and the <clipPath> is used which hides the overflowing bars.

• https://github.com/recharts/recharts/blob/3.x/src/cartesian/Bar.tsx#L496

@ckifer this issue might be resolved now since we can hide overflowing bars using the allowDataOverflow field on the YAxis.

Example code with overflow fixed

import React, { PureComponent } from "react";
import {
  BarChart,
  Bar,
  Rectangle,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} 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 function BarGraph() {
    return (
    <BarChart
        width={500}
        height={300}
        data={data}
        margin={{
          top: 100,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis domain={[0, 5000]} type={"number"} dataKey="uv" allowDataOverflow />
        <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>
    );
}