React Recharts, difference between chromium and firefox

Question

I have a stacked area chart with a time series. I'm normalizing the data to always add up to 100%. With some specific data, the chart breaks, and used to break in the same way in firefox until I added scale="time" to XAxis . Right now this is what I have:

<AreaChart data={percentData.sort((a, b) => a.name >= b.name)}>
    <defs>
        {colors.map((c, i) => (
            <linearGradient id={`graphColor${i}`} x1="0" y1="0" x2="0" y2="1" key={c}>
                <stop offset="5%" stopColor={c} stopOpacity={1} />
                <stop offset="95%" stopColor={c} stopOpacity={0.5} />
            </linearGradient>
        ))}
        {customGradients()}
    </defs>
    <XAxis
        dataKey="name"
        type="number"
        domain={[MIN, MAX]}
        scale="time"
        tickFormatter={dateFormatter}
        ticks={tickArray}
        tickCount={5}
    >
        <Label value="Date" position="bottom" style={{ textAnchor: 'middle' }} />
    </XAxis>
    <YAxis ticks={[0, 25, 50, 75, 100]} domain={[0, 100]} unit="%" type="number">
        <Label angle={-90} value="Percentage" position="insideLeft" style={{ textAnchor: 'middle' }} />
    </YAxis>
    <Tooltip content={<CustomTooltip tickFormatter={dateFormatter} />} />
    <CartesianGrid strokeDasharray="3 3" />
    {tab
        && tab.keys
            .sort()
            .map((k, i) => (
                <Area
                    type="monotone"
                    dataKey={k}
                    stroke={tab.data[`${k}color`] || getColorForCurrentIndex(i)}
                    fillOpacity={1}
                    fill={
                        tab.data[`${k}color`]
                            ? `url(#graphColor${k}color)`
                            : `url(#graphColor${getColorIndex(i)})`
                    }
                    key={k}
                    stackId="1"
                />
            ))}
</AreaChart>

The console in chromium outputs the following:

Error: <rect> attribute x: Expected length, "NaN".
Error: <rect> attribute width: Expected length, "NaN".

I'm using unix timestamps for the x coordinates, they are proper number instances.

And this is the result in firefox: Firefox stacked time series area chart

The first render on chromium: Chromium stacked time series area chart first render

After re-render on chromium: Chromium stacked time series area chart second render

Any help is appreciated, struggling with figuring this out. Thanks!

I've tried the example for Percent area chart provided in recharts docs, same result.

Answer 1

Turns out I wasn't sorting my data properly, even though they were numbers passed to a numeric axis, sorting the data array fixed this issue:

sort((a, b) => a.name >= b.name) => sort((a, b) => a.name - b.name)