[Question] Tooltip to use name field, not array position

What is the current behavior?

The default tooltip is using the data point’s array index as the name instead of the object’s name field.

What is the expected behavior?

I want the tooltip to use the data point’s name as shown in the Recharts examples and API.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

Rechart version: 1.0.0-alpha.1 Browser: Chrome Not sure if it works in previous versions of Recharts.

Code

const deviceData = [ {name: 'Misfit', amount: 75, fill: '#82ca9d'}, {name: 'Samsung', amount: 96, fill: '#a4de6c'}, {name: 'Other (not listed)', amount: 36, fill: '#d0ed57'}, {name: 'Apple Watch', amount: 230, fill: '#83a6ed'}, {name: 'Jawbone', amount: 125, fill: '#8dd1e1'}, {name: 'Fitbit', amount: 200, fill: '#8884d8'}, ];

<PieChart width={800} height={400}> <Pie data={deviceData} dataKey="amount" cx={150} cy={110} innerRadius={50} outerRadius={80} label /> <Legend iconSize={10} width={120} height={140} layout='vertical' verticalAlign='middle' align="right" /> <Tooltip payload={deviceData} /> </PieChart>

[ZephD]

http://jsfiddle.net/sj0cfqc8/38/

<Pie nameKey="name" />

This took me WAY to f*ing long to find.

@xile611 Why is nameKey and dataKey not defaulted to “name” and “value” respectively?

[mjsevilla]

@ZephD THANK YOU! Ugh, finally. I wish the docs were more details. They’re honestly pointless: formatter: the formatter function 😐