Dots don't appear

Hello,

I call this 2 Component 2 times from the same function to get 2 identical graphs, only data change :

<ResponsiveContainer>
				<ComposedChart  data={areaLine.slice()} margin={{ top: 10, right: 30, left: 0, bottom: 0 }} stroke="none">
					<XAxis dataKey="name" tick={{ fill: '#ffffff' }} stroke="rgba(255,255,255,.5)"/>
					<YAxis tick={{ fill: '#ffffff' }} stroke="rgba(255,255,255,.5)"/>
					<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,.5)"/>
					<Tooltip />
					<Area type="monotone" dataKey="Periode actuelle" stroke="#236cb6" strokeWidth={2} fillOpacity={0.3} fill="#44c0ff" activeDot={{ stroke: '#white', strokeWidth: 4, r: 8, fill: '#ff5f4a'}} dot={{ stroke: '#44c0ff', strokeWidth: 4, r: 2, fill: 'blue'}}/>
					<Line type="monotone" dataKey="Periode precedente" stroke="#ff7f78" strokeWidth={2} activeDot={{ stroke: '#white', strokeWidth: 4, r: 8, fill: '#ff5f4a'}} dot={{ stroke: '#44c0ff', strokeWidth: 4, r: 2, fill: 'blue'}} />
				</ComposedChart>
			</ResponsiveContainer>

And the result is :

Why dot is only on the last line? and not on both graph and on the Area and Line ?

Thanks in advance 😄

[bas-l]

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

[CiroGomes]

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 😃