plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.95k stars 1.86k forks source link

Allow setting 'hoverformat' for z-values in heatmap #1383

Closed jdugge closed 6 years ago

jdugge commented 7 years ago

I would like to round the z-values shown when hovering over a heatmap. I tried setting zaxis: { hoverformat: '.2f'}, but unfortunately this has no effect in a heatmap plot.

chrome_2017-02-15_16-21-47

Would it be possible to add a way for setting the hoverformat for z-values in heatmap plots? Maybe such an option already exists, and I just haven't found it?

Fiddle: https://jsfiddle.net/7rdcm0rg/3/

etpinard commented 7 years ago

That would be nice. Thanks for posting!

geocosmite commented 7 years ago

Analogous capabilities to what @jdugge suggests for heatmap plots would be terrific for the 'intensity' attribute used in mesh3d plots and the 'surfacecolor' attribute in 'surface' plots.

jdugge commented 7 years ago

I'd be happy to take a shot at implementing this, but I'm not quite sure what the best place for the format option would be.

I see three possible places:

  1. Use zaxis.hoverformat. This doesn't seem ideal, because heatmaps don't actually have an associated z-axis object, and creating one just for formatting the labels seems like overkill.
  2. Add a hoverformat config to the colorbar. This is pretty close in terms of plot semantics, because the colors take the place of the z-dimension in heatmaps, but it might be confusing because the hovering doesn't actually happen on the colorbar.
  3. Add a zhoverformat config to the heatmap trace. This would break with the pattern of assigning hoverformats to axes instead of traces, but that pattern isn't strictly adhered to in heatmaps anyway (cf. the existing zauto, zmin and zmax configs in heatmaps).

Any thoughts?

geocosmite commented 7 years ago

Any of the the three methods would be great but it seems to me that the easiest to understand place for most people would probably be option 3 given that this indeed is where other configuration options are defined for the display of the associated data.

etpinard commented 7 years ago

Thanks for looking into this @jdugge !

I'd vote for 3). I'm not a fan of the zhoverformat name, but yeah I believe this feature should be set in the trace object. We can't allow 2) as heatmap trace can exist without colorbars.

Perhaps we should add a hoverlabel.zformat (or hoverlable.format.z ??) as part of the trace hoverlabel attribute container (added in https://github.com/plotly/plotly.js/pull/1582) . Down the road, we could add hoverlabel.xformat and hoverlabel.yformat (and even e.g. hoverlabel.lonformat for geo/mapbox traces) that way coordinate hover formatting could be set per-trace as well as per-axis (as currently with xaxis.hoverformat) where the trace setting takes precedence over the axis-wide setting.

jdugge commented 7 years ago

@etpinard I've started on this and created a pull request to my forked master, as described in the instructions to contributors. Would you (or someone else) like to take a look at https://github.com/jdugge/plotly.js/pull/1 and let me know whether this is the right approach, and how to proceed from here?

etpinard commented 7 years ago

Review of @jdugge prelim PR: https://github.com/jdugge/plotly.js/pull/1#pullrequestreview-69571442

etpinard commented 6 years ago

closed by https://github.com/plotly/plotly.js/pull/2106