cannot use several customdata values per data points in go.Pie

[emmanuelle]

See https://codepen.io/emmanuelle-plotly/pen/MWweqey?editable=true and hover: customdata[0] takes all the values whereas it should only take the first one. Is there a problem with the format of customdata?

Raised by https://stackoverflow.com/questions/60158618/plotly-how-to-add-elements-to-hover-data-using-plotly-express-piechart (also see plotly/plotly.py#2210).

[etpinard]

This one is actually not that obvious to solve.

Here's a "working" version: https://codepen.io/etpinard/pen/abOBWJG?editors=1010 where we have

"hovertemplate": "foo:%{customdata[0][0]} <br> bar:%{customdata[0][1]}"

This is because customdata in the pie event data (which is then used to generate text from the hovertemplate) is an array of values e.g

gd.on('plotly_hover', d => console.log(d.points[0].customdata))

gives [ ['a', 'A'] ] when hovering on the biggest sector.

---

Why you may ask? This is to support aggregated pie declarations for example: https://codepen.io/etpinard/pen/abOBWyK?editors=1010

where hovering on the biggest sector gives: [ ['a', 'A'], ['b', 'B'], ['c', 'C'] ] that is it shows the customdata corresponding to all the points contributing to the sector value.

For those interested, the relevant routine is:

plotly.js/src/components/fx/helpers.js

Lines 186 to 217 in cef9304

	/**
	* Appends values inside array attributes corresponding to given point number array
	* For use when pointData references a plot entity that arose (or potentially arose)
	* from multiple points in the input data
	*
	* @param {object} pointData : point data object (gets mutated here)
	* @param {object} trace : full trace object
	* @param {Array(number)|Array(Array(number))} pointNumbers : Array of point numbers.
	* Each entry in the array may itself be a length-2 array [row, col] to dig into 2D arrays
	*/
	exports.appendArrayMultiPointValues = function(pointData, trace, pointNumbers) {
	var arrayAttrs = trace._arrayAttrs;
	if(!arrayAttrs) {
	return;
	}
	for(var i = 0; i < arrayAttrs.length; i++) {
	var astr = arrayAttrs[i];
	var key = getPointKey(astr);
	if(pointData[key] === undefined) {
	var val = Lib.nestedProperty(trace, astr).get();
	var keyVal = new Array(pointNumbers.length);
	for(var j = 0; j < pointNumbers.length; j++) {
	keyVal[j] = getPointData(val, pointNumbers[j]);
	}
	pointData[key] = keyVal;
	}
	}
	};

---

One could argue that non-aggregated pies should have event data showing just ['a', 'A'], but I would consider that a breaking change.

[etpinard]

(Removing the bug label)

[emmanuelle]

Thank you @etpinard, it makes sense. We just need to document it! Do you want to close the issue now or wait until documentation examples are added.

[etpinard]

Do you want to close the issue now or wait until documentation examples are added.

It's probably better to move this issue to the documentation repo, but I'll let you decide.

[zared619]

@etpinard Sorry to bring this back from the dead, but something is broken with the example. The hover is broken for the latter two traces.

But works for the first two

I'm experiencing a similar issue in my individual implementation.

[AyoCodess]

This one is actually not that obvious to solve.

Here's a "working" version: https://codepen.io/etpinard/pen/abOBWJG?editors=1010 where we have

"hovertemplate": "foo:%{customdata[0][0]} <br> bar:%{customdata[0][1]}"

This is because customdata in the pie event data (which is then used to generate text from the hovertemplate) is an array of values e.g

gd.on('plotly_hover', d => console.log(d.points[0].customdata))

gives [ ['a', 'A'] ] when hovering on the biggest sector.

Why you may ask? This is to support aggregated pie declarations for example: https://codepen.io/etpinard/pen/abOBWyK?editors=1010

where hovering on the biggest sector gives: [ ['a', 'A'], ['b', 'B'], ['c', 'C'] ] that is it shows the customdata corresponding to all the points contributing to the sector value.

For those interested, the relevant routine is:

plotly.js/src/components/fx/helpers.js

Lines 186 to 217 in cef9304

	/**
	* Appends values inside array attributes corresponding to given point number array
	* For use when pointData references a plot entity that arose (or potentially arose)
	* from multiple points in the input data
	*
	* @param {object} pointData : point data object (gets mutated here)
	* @param {object} trace : full trace object
	* @param {Array(number)|Array(Array(number))} pointNumbers : Array of point numbers.
	* Each entry in the array may itself be a length-2 array [row, col] to dig into 2D arrays
	*/
	exports.appendArrayMultiPointValues = function(pointData, trace, pointNumbers) {
	var arrayAttrs = trace._arrayAttrs;
	if(!arrayAttrs) {
	return;
	}
	for(var i = 0; i < arrayAttrs.length; i++) {
	var astr = arrayAttrs[i];
	var key = getPointKey(astr);
	if(pointData[key] === undefined) {
	var val = Lib.nestedProperty(trace, astr).get();
	var keyVal = new Array(pointNumbers.length);
	for(var j = 0; j < pointNumbers.length; j++) {
	keyVal[j] = getPointData(val, pointNumbers[j]);
	}
	pointData[key] = keyVal;
	}
	}
	};

One could argue that non-aggregated pies should have event data showing just ['a', 'A'], but I would consider that a breaking change.

This implementation no longer works. Any update?