Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Line graph being rendered incorrectly #2507

Closed
Drleugim opened this issue Feb 2, 2024 · 5 comments
Closed

Line graph being rendered incorrectly #2507

Drleugim opened this issue Feb 2, 2024 · 5 comments
Labels

Comments

@Drleugim
Copy link

Drleugim commented Feb 2, 2024

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
image

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
Copy link
Author

Hello all, any updates on this?

@plouc
Copy link
Owner

plouc commented Mar 7, 2024

@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
Copy link

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
Copy link
Owner

plouc commented Apr 22, 2024

@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
Copy link
Owner

plouc commented May 21, 2024

Closing the issue until we have a minimal reproducible example.

@plouc plouc closed this as completed May 21, 2024
@plouc plouc closed this as not planned Won't fix, can't repro, duplicate, stale May 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants