Line Graph - Cannot read from undefined property (reading 'x') when useMesh is enabled.

[rob-cleeia]

Describe/explain the bug We're using Nivo/Line (responsive) to render some line graphs. The data we use is nondeterministic, so we validate the data before we send it to the graph. Based on the documentation (here: https://nivo.rocks/line/), we use the following type for line graph data:

interface line {
    id:   string | number;
    data: {
        x: number | string | Date
        y: number | string | Date
    }[]
}[]

However, we've recently noticed that if we have the x axis as a number and the y axis as a string, with useMesh enabled, it throws a client side exception.

To Reproduce Render a Nivo/Line Graph with useMesh enabled, with data containing x axis as a number, and y axis as a string. EG:

import React from 'react';
import { ResponsiveLine } from '@nivo/line';

export const LineGraph: React.FC = () => (
  <div style={{ height: '20rem' }}>
    <ResponsiveLine
      data={[
        {
          id: '1',
          label: 'Joe Biden',
          data: [
            {
              x: 1973,
              y: 'Senator',
            },
            {
              x: 2009,
              y: 'Vice President',
            },
            {
              x: 2017,
              y: 'End of Vice Presidency',
            },
            {
              x: 2021,
              y: 'President',
            },
          ],
        },
      ]}
      useMesh
    />
  </div>
);
export default LineGraph;

Steps to reproduce the behaviour:

1. Load above component.
2. Hover mouse over Line Graph

Expected behaviour Should not cause a client side error.

Screenshots Chrome: FireFox:

Desktop (please complete the following information - Not sure if this at all relevant, but okay):

• OS: MacOS 14.5
• Browser: Chrome v127.0.6533.73
• Browser: FireFox v115.13.0esr (64-bit)

Additional context

• We've disabled line-graphs on the website for now, as the data we receive is nondeterministic.
• The error text in chrome is as follows:

  nivo-line.es.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'x')
    at nivo-line.es.js:1:1
    at renderWithHooks (react-dom.development.js:11121:1)
    at updateFunctionComponent (react-dom.development.js:16290:1)
    at beginWork$1 (react-dom.development.js:18472:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:20565:1)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:20614:1)
    at invokeGuardedCallback (react-dom.development.js:20689:1)
    at beginWork (react-dom.development.js:26949:1)
    at performUnitOfWork (react-dom.development.js:25748:1)
    at workLoopSync (react-dom.development.js:25464:1)

• I asked this on Discord, and never got an answer.
  1. https://discord.com/channels/358204068931567619/358204068931567620/1271054826637365248

[CTX-Rachel]

I had the same problem, when temporarily removing LineChart everything was fine.

[diego9497]

This issue is happening to me when the data is empty ([]) and I hover mouse over the graph, when there is data is working fine. I'm upgrading from 0.79.1 to 0.88.0, it was working fine in the old version.

Codesandbox

Edit: @plouc I added useMesh={data[0]?.data?.length > 1} to prevent the app break, but as I mentioned before this was working fine on the last version that I used 0.79.1