Line graph being rendered incorrectly

[Drleugim]

Describe/explain the bug
When rendering the line graph the data points are not connected in the expected order even though the data set is set up correctly.
To Reproduce
I can't find a way to reproduce consistently. Sometimes it happens, and sometimes it does not.
I'm not using the most current version of Nivo since I'm tied to node 14 and using the latest version of Nivo causes dependency issues.

Here are the versions of Nivo I'm using:
"@nivo/core": "^0.79.0",
"@nivo/line": "^0.79.0",
"@nivo/pie": "^0.79.0",

Here is a code snip of how I'm setting up.

<ResponsiveLine
        margin={{ top: 50, right: 200, bottom: 120, left: 70 }}
        yScale={{
          type: 'linear',
        }}
        xScale={{
          type: 'time',
          format: '%d/%m/%Y', // Specify your date format
          useUTC: false,
        }}
        xFormat="time:%d/%m/%Y" // Format to display on the x-axis
        axisBottom={{
          format: '%d', // Specify the format you want to display
        }}
        axisLeft={{
          format: (value) =>
            value.toLocaleString('es-CL', {
              minimumFractionDigits: 3,
              maximumFractionDigits: 3,
              style: 'decimal',
            }),
        }}
        axisTop={null}
        axisRight={null}
        pointSize={10}
        pointColor={{ theme: 'background' }}
        pointBorderWidth={2}
        pointBorderColor={{ from: 'serieColor' }}
        pointLabelYOffset={-12}
        enableSlices="x"
        useMesh={true}
        sliceTooltip={({ slice }) => {
          return (
            <div
              style={{
                background: 'white',
                padding: '9px 12px',
                border: '1px solid #ccc',
              }}
            >
              <h6>{slice.points[0].data.xFormatted}</h6>
              <SolidLine />
              {slice.points.map((point) => (
                <div
                  key={point.id}
                  style={{
                    color:
                      point.serieColor === 'rgba(255, 255, 255, 0)'
                        ? 'red'
                        : point.serieColor,
                    padding: '3px 0',
                    display: 'flex',
                    flexDirection: 'row',
                  }}
                >
                  <strong>{point.serieId}</strong>
                  <div style={{ color: 'black' }}>
                    {': '}
                    {point.data.y.toLocaleString('es-CL', {
                      minimumFractionDigits: 3,
                      maximumFractionDigits: 3,
                      style: 'decimal',
                    })}{' '}
                    Ton
                  </div>
                </div>
              ))}
            </div>
          )
        }}
        legends={[
          {
            anchor: 'right',
            direction: 'column',
            justify: true,
            translateX: 120,
            translateY: 0,
            itemsSpacing: 20,
            itemDirection: 'top-to-bottom',
            itemWidth: 50,
            itemHeight: 30,
            itemOpacity: 0.75,
            symbolSize: 12,
            symbolShape: 'circle',
            symbolBorderColor: 'rgba(0, 0, 0, .5)',
            effects: [
              {
                on: 'hover',
                style: {
                  itemBackground: 'rgba(0, 0, 0, .03)',
                  itemOpacity: 1,
                },
              },
            ],
          },
        ]}
        data={data}
      />

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: 14.2.1 (23C71)
• Browser: chrome
• Version: 120.0.6099.234 (Official Build) (arm64)

Additional context
It happens with small and large data sets

[Drleugim]

Hello all, any updates on this?

[plouc]

@Drleugim, without seeing the data, it's a bit difficult to tell what the issue could be, could you please setup a codesandbox for this?

[wastedev]

I don't know exact problem, but I faced with the same problem and solved it by disabling animations. From first thought many re-renders in the same time may cause this problem. While the react-spring still has not finished animating, a re-render occurs, which interrupts the initial animation and starts a new one, in some cases the interrupted animation freezes at the random point.

[plouc]

@wastedev, for animations, this is probably due to how the identity of a point is preserved while animating, but I don't have a solution yet for this specific issue.

[plouc]

Closing the issue until we have a minimal reproducible example.