plotly.js icon indicating copy to clipboard operation
plotly.js copied to clipboard

Not possible to use several customdata values per data points in go.Pie

Open emmanuelle opened this issue 5 years ago • 6 comments

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?

image

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

emmanuelle avatar Feb 18 '20 23:02 emmanuelle

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:

https://github.com/plotly/plotly.js/blob/cef9304d2056079164cdc0d3204a25d7e4b79084/src/components/fx/helpers.js#L186-L217


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

etpinard avatar Feb 21 '20 20:02 etpinard

(Removing the bug label)

etpinard avatar Feb 21 '20 21:02 etpinard

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.

emmanuelle avatar Feb 22 '20 03:02 emmanuelle

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.

etpinard avatar Feb 25 '20 23:02 etpinard

@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. image But works for the first two image

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

zared619 avatar Oct 28 '21 18:10 zared619

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:

https://github.com/plotly/plotly.js/blob/cef9304d2056079164cdc0d3204a25d7e4b79084/src/components/fx/helpers.js#L186-L217

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?

AyoParadis avatar Feb 25 '22 03:02 AyoParadis