Working ref props for all components

[mdrayer]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Gaining access to the component's element via ref and acting on it in some way as you would in the usual useRef() way. For example, if a dev wanted to get the dimensions of the <YAxis> component, the use of a working ref prop would make this very simple to do.

What does the proposed API look like?

The ref prop already exists on components used within charts, but they do not seem to work for all components. Possibly this is an issue with the components not properly forwarding their refs? Or possibly just an oversight with leaving the ref prop exposed?

Code example:

function MyChart() {
  const yAxisRef = useRef(null);

  useEffect(() => {
    // Access your ref and do whatever.
  }, [yAxisRef]);

  return (
    <LineChart>
      <YAxis ref={yAxisRef} />
    </LineChart>
  );
}

Currently, this gives us null for yAxisRef.current when we access it inside useEffect, whereas we would expect either the element or class for YAxis.

[wesoudshoorn]

Is there any update on this being implemented?

We're trying to build some custom positioning logic for the tooltip and were looking to use a ref prop on the <CartesianGrid /> component, but it does not seem to work.

[roger-tbg]

+1 here. Trying to use this on ResponsiveContainer and get a deprecation warning.

[ckifer]

@roger-tbg there should only be a warning if you use ref.current.current on responsive container. That was a mistake and has been corrected backwards compatibility. The warning is just saying we'll change to the correct ref.current implementation in the next breaking release (3.0)

[roger-tbg]

@ckifer This is the relevant code:

const TopFiveWorkItemsGraph = ({
	data,
	xAxisLabel,
	yAxisLabel,
}: TopFiveWorkItemsGraphProps) => {
	const chartRef = useRef(null)
	const handleBarClick = (data: object) => {
		const rect = chartRef.current.getBoundingClientRect()
		setCurrentBarData({
			data,
			rect,
		})
	}
	const [currentBarData, setCurrentBarData] = useState({
		data: {},
		rect: {},
	})
	console.log('currentBarData', currentBarData)

	return (
		<ResponsiveContainer
			width="100%"
			height="100%"
			className={'rounded-lg bg-white'}
			ref={chartRef}
		>
			<BarChart
				width={500}
				height={300}
				data={data}
				margin={{
					top: 25,
					right: 30,
					left: 20,
					bottom: 15,
				}}
				onClick={handleBarClick}
			>
			```

[ckifer]

https://github.com/recharts/recharts/blob/master/src/component/ResponsiveContainer.tsx#L75

This was done with the intent to fix the ref.current.current problem in a backwards compatible way while letting the user know that the old "wrong way" will be removed in the next major version. Looks like it logs no matter what when a ref is used which is unintentional (only should log when the incorrect ref.current.current is used).

Your usage is fine and isn't being deprecated, the log message just fires in both cases. Thanks for the heads up on that.

CC @HHongSeungWoo

[ckifer]

@roger-tbg warn issue should be fixed in 2.12.2

[yuki0418]

Hi. Is there any update on this being implemented?
I try get props from ref of , however, it seems still not working in my environment.
ref.current always return null. And there is a warning

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

React: 17.0.2
recharts: 2.1.3

I try update versions but no working.

[ckifer]

No updates - it needs worked on if anyone wants to help out