Recharts Scatter not Overlapping

Question

The data I'm feeding into recharts is not overlapping and is getting stacked horizontally instead. This "stacked" data has the same date (x-axis) and same count (y-axis). I want them to stay on top of each other instead.

Current Plot: In this scatter below, the sets of stacked points you see are all for the same date (Aug 3). This date is being spread across the entire plot instead of being on point on the x-axis.

Code:

...
<ResponsiveContainer width={"100%"} height={"100%"}>
                    <ScatterChart
                        data={seqData}
                        margin={{
                            top: 5,
                            right: 30,
                            left: 20,
                            bottom: 5,
                        }}
                    >
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis
                            dataKey="receipt_date"
                            tickFormatter={dateFormatter} // converts date time to yy-mm
                        />
                        <YAxis />
                        <Tooltip />
                        <Legend />
                        <Scatter
                            type="monotone"
                            dataKey="yCounter"
                            fillOpacity="0.6"
                        />
       </ScatterChart>
 </ResponsiveContainer>
...

Data Format:

[ ... {yCounter: 57, fill: "red", receipt_date: 2022-08-03} ... ]

Answer 1

We'll need to set allowDuplicateCategory={true} in the x-axis