Incorrect hovering behaviour of StackedBarChart

[mfialko]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

I want to highlight only the rectangles within the bar that I hovered over. I set it up to have a different tooltip for each rectangle in the bar via <Tooltip shared={false} />. I use <Bar activeBar={{ fill: "#82ca9dCC" }} /> to fill the hovered area with a lighter color. However, when I hover over the bar, the active bar overlaps the remaining bars.

Steps to reproduce and demo of the problem

Codesandbox: https://codesandbox.io/p/sandbox/stacked-bar-chart-forked-p3tp97

Here is the demo:

What is the expected behavior?

When I hover an area - it is highlighted.

Which versions of Recharts, and which browser / OS are affected by this issue?

Recharts: 2.13.0
Google Chrome: 129
OS: MacOS 15.0

[ckifer]

Does this happen on previous versions or no?

[mfialko]

v2.13.0-alpha.5 - yes, same behaviour
v2.13.0-alpha.4 - yes

releases from 2.12.0 to 2.12.7 show me error minPointSize is not a function for this codesandbox

[ckifer]

I'll take a look but I'm currently on vacation and can't address this for ~2 weeks

[ckifer]

it looks like the hovering functionality for shared is messed up in general and it has been since 2.9.0 when activeBar was added.

[ckifer]

https://codesandbox.io/p/sandbox/stacked-bar-chart-forked-p3tp97

This is possible only without an activeBar prop at this time in 2.x.

activeBar is based on indices and with shared={false} we can no longer rely on indices as the indices were axis item based. This should be possible in 3.x

[kaaviya-min]

Adding onMouseEnter and onMouseLeave to <Bar /> with tooltip shared false. Doesn't render the active value on the tooltip. Will this also fix on version 3.0?

[ckifer]

I would think so but not sure, I'll check and get back

[ckifer]

I can't seem to reproduce the issue with onMouseEnter/Leave

[PavelVanecek]

Hello everyone who's watching this issue! We have released an alpha version 3.0.0-alpha.2 which fixes this problem.

Here is a migration guide: https://github.com/recharts/recharts/wiki/3.0-migration-guide

As of now we have fixed all the new 3.x bugs we are aware of so, and are ready for your feedback. Please feel free to try recharts: 3.0.0-alpha.2 in a test build and let us know how it went!

[zommerberg]

@PavelVanecek

Seems like after upgrading to v3 i get a "XXX cannot be used as a JSX component" whenever i import anything like a Barchart or similar.
In my ts config i have ES2022 as a target, were there any other typescript requirement changes?

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": false,
    "isolatedModules": true,
    "lib": ["es2022", "DOM", "DOM.Iterable"],
    "moduleDetection": "force",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ES2022",
    "strictNullChecks": true,
    "plugins": [{ "name": "next" }],
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowJs": true,
    "jsx": "preserve",
    "noEmit": true
    }
}

Full error:

  Its type 'ForwardRefExoticComponent<CategoricalChartProps & RefAttributes<{ clipPathId: string; container?: HTMLElement | undefined; parseEventsOfWrapper(): { [x: string]: (e?: Event | undefined) => any; } | { ...; }; ... 19 more ...; UNSAFE_componentWillUpdate?(nextProps: Readonly<...>, nextState: Readonly<...>, nextContext:...' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<CategoricalChartProps & RefAttributes<{ clipPathId: string; container?: HTMLElement | undefined; parseEventsOfWrapper(): { [x: string]: (e?: Event | undefined) => any; } | { ...; }; ... 19 more ...; UNSAFE_componentWillUpdate?(nextProps: Readonly<...>, nextState: Readonly<...>, nextContext:...' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
      Type 'ReactNode' is not assignable to type 'ReactNode | Promise<ReactNode>'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode | Promise<ReactNode>'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)
index.d.ts(387, 9): 'children' is declared here.```

[ckifer]

What React and Typescript versions are you using? I can run your config without issue

[zommerberg]

"typescript": "^5.7.3"
"react": "19.0.0",

I will create a full example, i am using a monorepo so there might be something i missed

[zommerberg]

@ckifer I made a brand new nextjs project and just installed recharts: 3.0.0-alpha.2 without even changing the default config to mine and i got the same error:

Here is a full repo:
https://github.com/zommerberg/nextjs-recharts-v3-types-bug

CartesianGrid works fine

[ckifer]

@zommerberg looks like this is something specific to React 19 and React 19 types or something specific to Next 15 ts-config. Please create a separate issue since this issue isn't related

[ckifer]

@zommerberg this is your solution mapbox/mapbox-sdk-js#477 (comment)
Unrelated to recharts or react19. Seems to be a next problem

[PavelVanecek]

Can confirm npm install @types/react fixes that on the sample project provided. Not sure what we can do from our side.

[zommerberg]

@PavelVanecek You mean moving the types/react from dev dependency to normal dependency? The sample project had this library pre-installer already.

Is there a reason why CartesianGrid works fine without any patches, but the other components require a patch?

[PavelVanecek]

Ah I didn't notice. I also modified the tsconfig. Following the link from Coltin above.

[zommerberg]

@PavelVanecek @ckifer

The fix might be tricky to do in monorepos and it definitely feels like something is broken with the library itself.

I looked into the CartesianGrid component which works fine without any fixes and compared it with ResponsiveContainer

It seems like export const ResponsiveContainer is bad, but export function CartesianGrid with a CartesianGrid.displayName = 'CartesianGrid' solves the issue

But i havent verified it 100%

[ckifer]

but the other components require a patch

Nothing requires a patch. This is a next issue with react types. It seems next cannot find the correct version of react types for whatever reason upon install. Once it can find the types with the TS config changes, everything is fine.

Not sure what else we can do when it works correctly for all other types of new projects. Feel free to investigate more if you'd like