Cannot read property 'showTooltipAt' of undefined

[john-martinez-729]

Cannot read property 'showTooltipAt' of undefined

Describe/explain the bug Trying to use a line graph. It works when I comment out useMesh={true}. The only two pieces of the line graph so far are the following:

  <ResponsiveLine
          data={testData}
          margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
          xScale={{ type: 'point' }}
          yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: true, reverse: false }}
          axisTop={null}
          axisRight={null}
          axisBottom={{
              orient: 'bottom',
              tickSize: 5,
              tickPadding: 5,
              tickRotation: 0,
              legend: 'transportation',
              legendOffset: 36,
              legendPosition: 'middle'
          }}
          axisLeft={{
              orient: 'left',
              tickSize: 5,
              tickPadding: 5,
              tickRotation: 0,
              legend: 'count',
              legendOffset: -40,
              legendPosition: 'middle'
          }}
          enableGridX={false}
          colors={{ scheme: 'nivo' }}
          pointSize={11}
          pointColor={{ theme: 'background' }}
          pointBorderWidth={2}
          pointBorderColor={{ from: 'serieColor' }}
          pointLabel="x"
          pointLabelYOffset={7}
          useMesh={true}
          legends={[
              {
                  anchor: 'bottom-right',
                  direction: 'column',
                  justify: false,
                  translateX: 100,
                  translateY: 0,
                  itemsSpacing: 0,
                  itemDirection: 'left-to-right',
                  itemWidth: 80,
                  itemHeight: 20,
                  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
                          }
                      }
                  ]
              }
          ]}
        />

const testData = [
  {
    "id": "japan",
    "color": "hsl(29, 70%, 50%)",
    "data": [
      {
        "x": "plane",
        "y": 70
      },
      {
        "x": "helicopter",
        "y": 172
      },
      {
        "x": "boat",
        "y": 83
      },
      {
        "x": "train",
        "y": 216
      },
      {
        "x": "subway",
        "y": 275
      },
      {
        "x": "bus",
        "y": 56
      },
      {
        "x": "car",
        "y": 63
      },
      {
        "x": "moto",
        "y": 263
      },
      {
        "x": "bicycle",
        "y": 153
      },
      {
        "x": "horse",
        "y": 162
      },
      {
        "x": "skateboard",
        "y": 156
      },
      {
        "x": "others",
        "y": 18
      }
    ]
  },
  {
    "id": "france",
    "color": "hsl(100, 70%, 50%)",
    "data": [
      {
        "x": "plane",
        "y": 3
      },
      {
        "x": "helicopter",
        "y": 9
      },
      {
        "x": "boat",
        "y": 172
      },
      {
        "x": "train",
        "y": 249
      },
      {
        "x": "subway",
        "y": 90
      },
      {
        "x": "bus",
        "y": 2
      },
      {
        "x": "car",
        "y": 209
      },
      {
        "x": "moto",
        "y": 148
      },
      {
        "x": "bicycle",
        "y": 106
      },
      {
        "x": "horse",
        "y": 40
      },
      {
        "x": "skateboard",
        "y": 43
      },
      {
        "x": "others",
        "y": 272
      }
    ]
  },
  {
    "id": "us",
    "color": "hsl(287, 70%, 50%)",
    "data": [
      {
        "x": "plane",
        "y": 117
      },
      {
        "x": "helicopter",
        "y": 295
      },
      {
        "x": "boat",
        "y": 249
      },
      {
        "x": "train",
        "y": 16
      },
      {
        "x": "subway",
        "y": 249
      },
      {
        "x": "bus",
        "y": 7
      },
      {
        "x": "car",
        "y": 235
      },
      {
        "x": "moto",
        "y": 243
      },
      {
        "x": "bicycle",
        "y": 74
      },
      {
        "x": "horse",
        "y": 261
      },
      {
        "x": "skateboard",
        "y": 239
      },
      {
        "x": "others",
        "y": 162
      }
    ]
  },
  {
    "id": "germany",
    "color": "hsl(93, 70%, 50%)",
    "data": [
      {
        "x": "plane",
        "y": 222
      },
      {
        "x": "helicopter",
        "y": 267
      },
      {
        "x": "boat",
        "y": 196
      },
      {
        "x": "train",
        "y": 37
      },
      {
        "x": "subway",
        "y": 37
      },
      {
        "x": "bus",
        "y": 214
      },
      {
        "x": "car",
        "y": 268
      },
      {
        "x": "moto",
        "y": 143
      },
      {
        "x": "bicycle",
        "y": 147
      },
      {
        "x": "horse",
        "y": 171
      },
      {
        "x": "skateboard",
        "y": 71
      },
      {
        "x": "others",
        "y": 148
      }
    ]
  },
  {
    "id": "norway",
    "color": "hsl(140, 70%, 50%)",
    "data": [
      {
        "x": "plane",
        "y": 27
      },
      {
        "x": "helicopter",
        "y": 283
      },
      {
        "x": "boat",
        "y": 172
      },
      {
        "x": "train",
        "y": 10
      },
      {
        "x": "subway",
        "y": 102
      },
      {
        "x": "bus",
        "y": 282
      },
      {
        "x": "car",
        "y": 172
      },
      {
        "x": "moto",
        "y": 276
      },
      {
        "x": "bicycle",
        "y": 111
      },
      {
        "x": "horse",
        "y": 118
      },
      {
        "x": "skateboard",
        "y": 19
      },
      {
        "x": "others",
        "y": 9
      }
    ]
  }
]

[john-martinez-729]

Found the solution! Apparently because I have multiple charts with different versions, I had to normalize the versions (I changed them all in package.json to 0.60.0) and reran yarn. That seemed to fix the problem!

[plouc]

Yes, as some nivo packages share common deps, you have to get all version aligned.