I am trying to get at the innards of the data object generated by recharts and used to populate their tooltips (so I can display it elsewhere). The image below shows the output of

console.log(data.payload[0]);

gained via a function placed on the Tooltip's content:

<Tooltip content={ this.showTooltipData.bind(this) } />

However, any attempt to get at the object ponents (Object.keys() returns the expected keys) fails with "undefined" or "null" references (edited for LiverpoolCoder):

showTooltipData = (data) => {
  console.log(data.payload[0]);
  console.log(data.payload[0].color);
}

Uncaught (in promise) TypeError: Cannot read property 'color' of undefined
    at PlotCharts._this.showTooltipData (PlotCharts.js) (...)

Am I missing something here?

It still looks like a simple array. Given:

showTooltipData = (data) => {
  if ( typeof data.payload[0] !== 'undefined') {
    // console.log(data.payload[0].then(function(payload){ payload.color }));
    console.log(Object.keys(data.payload[0]));
    console.log("dataKey = " + data.payload[0]["datakey"]);
  }
}

I see, in the log (you can see in the output above that dataKey does contain a value):

EDIT: the code above works fine, "datakey" is a typo - moved to dataKey and it seems to work. For anyone else who got here via web search for the same issue - you HAVE to check (typeof as above) the existence of the data before accessing it - moving the mouse around creates and destroys the data constantly.

I am trying to get at the innards of the data object generated by recharts and used to populate their tooltips (so I can display it elsewhere). The image below shows the output of

console.log(data.payload[0]);

gained via a function placed on the Tooltip's content:

<Tooltip content={ this.showTooltipData.bind(this) } />

However, any attempt to get at the object ponents (Object.keys() returns the expected keys) fails with "undefined" or "null" references (edited for LiverpoolCoder):

showTooltipData = (data) => {
  console.log(data.payload[0]);
  console.log(data.payload[0].color);
}

Uncaught (in promise) TypeError: Cannot read property 'color' of undefined
    at PlotCharts._this.showTooltipData (PlotCharts.js) (...)

Am I missing something here?

It still looks like a simple array. Given:

showTooltipData = (data) => {
  if ( typeof data.payload[0] !== 'undefined') {
    // console.log(data.payload[0].then(function(payload){ payload.color }));
    console.log(Object.keys(data.payload[0]));
    console.log("dataKey = " + data.payload[0]["datakey"]);
  }
}

I see, in the log (you can see in the output above that dataKey does contain a value):

EDIT: the code above works fine, "datakey" is a typo - moved to dataKey and it seems to work. For anyone else who got here via web search for the same issue - you HAVE to check (typeof as above) the existence of the data before accessing it - moving the mouse around creates and destroys the data constantly.

• javascript
• reactjs

• Are you sure swopping the console log to data.payload[0].color at the same line of code where it was data.payload[0]? – LiverpoolOwen Commented Mar 22, 2017 at 12:56
• Yes. Edited above. Is that what you meant? – Omortis Commented Mar 22, 2017 at 13:01
• You seem to be using a promise. Try outputting console.log(data.payload[0].then(function(payload){ payload.color })); – LiverpoolOwen Commented Mar 23, 2017 at 9:16
• Will do on Monday morning and edit - thanks! – Omortis Commented Mar 24, 2017 at 15:05
• 1 See my answer below and the edits in the OP. The data is being created and destroyed with every mouse move so its existence needs to be checked. Thanks for following and helping out though! – Omortis Commented Mar 28, 2017 at 13:18

1 Answer 1

The answer is from above:

showTooltipData = (data) => {
  if ( typeof data.payload[0] !== 'undefined') {
    console.log(Object.keys(data.payload[0]));
    console.log("dataKey = " + data.payload[0]["dataKey"]);
  }
}

You HAVE to check (typeof as above is one way) the existence of the data before accessing it - moving the mouse around creates and destroys the data constantly.