recharts: Dots don't appear

Same issue. Setting isAnimationActive on Line to false also solves it for me. Version: 1.6.2

Hello guys! On #1624 issue, @klarstrup gave a solution that worked for me. Apparently this problem happens in other types of graphic too, as in my case, was using Bar.

The solution, proposed by @klarstrup, was to put a key prop on the BarChart component, so when it changes, the whole graphic will re-render, with all the animations. I just put key={Math.random()}, so he always renders now 😃

@xile611 it persists.

Having the same issue but I don’t want to turn off the animation + I can’t set key={Math.random()} because I toggle lines (show/hide - and the animation is happening only for specific Line) and I don’t want the whole chart to rerender when the data changes.

I think it’s safe to infer this may be a react-smooth issue, so I opened an issue against that repo:

https://github.com/recharts/react-smooth/issues/44

I having a similar issue. If the animation is on, the areas stop drawing. It’s fully drawn if the window resizes. If the animation is off, everything works as expected.

I magically solved the issue by using useMemo, which might work for your case~

const dataUsedForChart = React.useMemo(() => {
   // Some data transformation here
}, [dataFetchedFromBackend])

I have managed to make it work with animation active. As mentioned before, the key is using the key prop.

const [dataVersion, setDataVersion] = useState(0)

useEffect(() => {
  setDataVersion((value) => value + 1)
}, [data])

return (
  ...
  <Area key={`data-${dataVersion}-area`}
  <Line key={`data-${dataVersion}-line`}
  ...
)

This increments the iteration of data and re-renders with the new key, forcing react to update the chart components. The only downside is that, in case of data change, the chart doesn’t “transition” but rather draws the line from beginning.

Hello everyone

Please, just add <Tooltip /> below <YAxis /> and set isAnimationActive={false} for <Line />

Worked in my case

I’m having the same issue. It seems to be if the animation is interrupted then the dots don’t get drawn.