Cannot read property '0' of null

[cbartram]

I am trying to render a simple line chart with multiple series. My data is formatted like this according to the example:

[
   {
      "label":"Respiratory Rate",
      "data":[
         {
            "x":108,
            "y":108
         }
      ]
   },
   {
      "label":"Blood Pressure",
      "data":[
         {
            "x":88,
            "y":88
         },
         {
            "x":116,
            "y":116
         }
      ]
   },
   {
      "label":"Heart Rate",
      "data":[
         {
            "x":72,
            "y":72
         }
      ]
   }
]

Whenever the data renders in the chart it throws the following error:

Cell.js:75 Uncaught TypeError: Cannot read property '0' of null
    at clipCells (Cell.js:75)
    at new Diagram (Diagram.js:57)
    at voronoi (voronoi.js:11)
    at Voronoi.js:136

Here is my component and how I am using the it:

function Dashboard(props) {
 const data = useMemo(
        () => [
           // Same data format listed above (and yes the data is set and not null/undefined)
            ...props.metrics
        ],
        [props.metrics]
    );

     const axes = useMemo(
        () => [
            { primary: true, type: 'linear', position: 'bottom' },
            { type: 'linear', position: 'left' }
        ],
        []
    );

    return (
                 <Chart
                        data={data}
                        axes={axes}
                        tooltip
                    />
    )
}

Oddly enough changing out the data with the example data seems to solve the issue. I just dont understand why its happening with my data because they are both formatted exactly the same.

[tylerthehaas]

this seems to be because you are misusing the tooltip prop. tooltip expects a memoized object that has align and anchor properties see this example.

[evenstephenr]

@cbartram did @tylerthehaas 's example solve the issue for you?

[cbartram]

It did thank you

[darthzeran]

question about this issue though, because in this other example from the docs that I am using, there is no align or anchor properties, but I still get the cannot read 0 of null error

function CustomTooltip({ getStyle, primaryAxis, datum }) {
  const data = React.useMemo(
    () =>
      datum
        ? [
            {
              data: datum.group.map(d => ({
                primary: d.series.label,
                secondary: d.secondary,
                color: getStyle(d).fill
              }))
            }
          ]
        : [],
    [datum, getStyle]
  )

https://react-charts.js.org/examples/custom-tooltip

*Edit, and I am only displaying one series

[darthzeran]

this seems to be because you are misusing the tooltip prop. tooltip expects a memoized object that has align and anchor properties see this example.

Does it though? Because As I was stepping through the code, if they are not there on the passed in tooltip, Charts will just add it on itself.

I am prettu sure it doesnt, because even if you delete those 2 options from the example in the sandbox, it still works perfectly fine.

[darthzeran]

I think this issue also ties into this other issue https://github.com/tannerlinsley/react-charts/issues/129, because when my secondary data point is equal to 0, the chart does not show the point, I get no error, and the chart renders with missing points. However, when I add .000001, to my secondary data points, the points all render and the line is drawn (if i leave out the tooltip)