Return actual data values (rather than calcdata values) for `xvals` / `yvals` in `hoveranywhere` and `clickanywhere` events by emilykl · Pull Request #7964 · plotly/plotly.js

emilykl · 2026-08-13T22:41:23Z

Modify hoverdata and clickdata such that the xvals / yvals properties always contain data values (in the same form as the input data, i.e. may be strings in some cases) rather than calcdata values (which are always numeric).

Result:

For ordinary numeric axes (e.g. linear and log) this change has (essentially) no effect.
- Technically there is some validation that happens during c2d, but it's basically just checking that the values are numeric, and returning undefined if not
For date axes, xvals / yvals now contain date strings rather than numbers representing milliseconds. (This addresses the bug reported in [BUG]: hoveranywhere / clickanywhere return incorrect timestamps for date axes with local time zones #7816)
For category axes, xvals / yvals now contain strings corresponding to category names rather than numeric values.

The attribute descriptions for hoveranywhere / clickanywhere refer to xvals and yvals being "in data space", so I believe this was always the intended behavior.

Steps for testing

Check out this branch
Create the following HTML file in the repo root. This HTML page creates a plotly.js plot where the x-axis is a date axis and the y-axis is a category axis:

Details

<!doctype html>
<meta charset="utf-8">
<title>hoveranywhere / clickanywhere coordinates</title>
<script src="dist/plotly.js"></script>
<p>Open the console, then hover and click anywhere in the plot.</p>
<div id="gd" style="width:700px;height:400px"></div>
<script>
    var gd = document.getElementById('gd');

    // local midnight -> next local midnight, as in issue #7816
    var dayStart = new Date(2026, 4, 31);
    var dayEnd = new Date(2026, 5, 1);

    Plotly.newPlot(gd, [{
        x: [new Date(2026, 4, 31, 6), new Date(2026, 4, 31, 18)],
        y: ['b', 'c'],
        mode: 'markers',
        marker: {size: 12}
    }], {
        xaxis: {type: 'date', range: [dayStart, dayEnd]},
        yaxis: {type: 'category', categoryorder: 'array', categoryarray: ['a', 'b', 'c', 'd']},
        hoveranywhere: true,
        clickanywhere: true,
        margin: {t: 20}
    });

    function log(name) {
        return function(d) {
            console.log(name, {
                xvals: d.xvals[0],
                yvals: d.yvals[0],
                'points[0].x': d.points[0] && d.points[0].x,
                'points[0].y': d.points[0] && d.points[0].y
            });
        };
    }

    gd.on('plotly_hover', log('hover'));
    gd.on('plotly_click', log('click'));
</script>

Run npm ci && npm run build
Open the HTML file in the browser, hover anywhere in the plot, and look at the console output. Note that xvals contains date strings and yvals contains a string matching a category (correct behavior)
Check out v4.0 and run npm ci && npm run build
Refresh the browser and note that xvals and yvals are now both numeric (incorrect behavior)

…ather than calcdata

camdecoster

Looks good and handles the issue well. I made a few comments.

camdecoster · 2026-08-14T19:25:51Z

+// the 300px-wide plot area spans exactly one day, so 0px is local midnight
+// and 150px is local noon, in any timezone
+function makeDatePlot(gd, layoutExtras) {
+    return makePlot(gd, Lib.extendFlat({ xaxis: { type: 'date', range: [dayStart, dayEnd] } }, layoutExtras), {


Should arguments 2 and 3 be swapped? Or should layoutExtras be renamed to traceExtras?

Good catch, this got messed up. Updated to standardize to (gd, traceExtras, layoutExtras) arguments for both makePlot and makeDatePlot.

camdecoster · 2026-08-14T19:27:27Z

@@ -0,0 +1 @@
+- Return actual data values (rather than calcdata values) for `xvals` / `yvals` in `hoveranywhere` and `clickanywhere` events [[#7964](https://github.com/plotly/plotly.js/pull/7964)]


Maybe throw a breaking change notice in here?

Suggested change

- Return actual data values (rather than calcdata values) for `xvals` / `yvals` in `hoveranywhere` and `clickanywhere` events [[#7964](https://github.com/plotly/plotly.js/pull/7964)]

- **Breaking**: Return actual data values (rather than calcdata values) for `xvals` / `yvals` in `hoveranywhere` and `clickanywhere` events [[#7964](https://github.com/plotly/plotly.js/pull/7964)]

camdecoster · 2026-08-14T19:55:19Z

Could you also take look at updating the hand written TS types per this change?

emilykl · 2026-08-18T15:51:22Z

Could you also take look at updating the hand written TS types per this change?

@camdecoster Just took a look, I don't think any updates are needed for this PR since xvals and yvals are type Datum[] which already covers both numbers and strings.

emilykl added 2 commits August 13, 2026 18:28

switch xvals/yvals in hover/click data to return actual data values r…

5cc6516

…ather than calcdata

add/update jasmine tests

b919eb1

emilykl mentioned this pull request Aug 13, 2026

fix: correct date axis timezone in hoveranywhere/clickanywhere events #7818

Open

emilykl changed the title ~~Hover click anywhere c2d 2~~ Return actual data values (rather than calcdata values) for xvals / yvals in hoveranywhere and clickanywhere events Aug 13, 2026

add draftlog

f0d860b

emilykl requested a review from camdecoster August 13, 2026 22:54

camdecoster approved these changes Aug 14, 2026

View reviewed changes

emilykl added 2 commits August 17, 2026 12:44

update draftlog

7761e5b

fix argument order in tests

b4ad58d

Navigation Menu

Uh oh!

Uh oh!

Return actual data values (rather than calcdata values) for `xvals` / `yvals` in `hoveranywhere` and `clickanywhere` events - #7964

Return actual data values (rather than calcdata values) for `xvals` / `yvals` in `hoveranywhere` and `clickanywhere` events#7964
emilykl wants to merge 5 commits into
v4.0from
hover-click-anywhere-c2d-2

emilykl commented Aug 13, 2026 •

edited

Loading

Uh oh!

camdecoster left a comment

Uh oh!

camdecoster Aug 14, 2026

Uh oh!

emilykl Aug 18, 2026

Uh oh!

camdecoster Aug 14, 2026

Uh oh!

camdecoster commented Aug 14, 2026

Uh oh!

emilykl commented Aug 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -0,0 +1 @@
		- Return actual data values (rather than calcdata values) for `xvals` / `yvals` in `hoveranywhere` and `clickanywhere` events [[#7964](https://github.com/plotly/plotly.js/pull/7964)]

	- Return actual data values (rather than calcdata values) for `xvals` / `yvals` in `hoveranywhere` and `clickanywhere` events [[#7964](https://github.com/plotly/plotly.js/pull/7964)]
	- Breaking: Return actual data values (rather than calcdata values) for `xvals` / `yvals` in `hoveranywhere` and `clickanywhere` events [[#7964](https://github.com/plotly/plotly.js/pull/7964)]

Uh oh!

Uh oh!

Conversation

emilykl commented Aug 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Steps for testing

Uh oh!

camdecoster left a comment

Choose a reason for hiding this comment

Uh oh!

camdecoster Aug 14, 2026

Choose a reason for hiding this comment

Uh oh!

emilykl Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

camdecoster Aug 14, 2026

Choose a reason for hiding this comment

Uh oh!

camdecoster commented Aug 14, 2026

Uh oh!

emilykl commented Aug 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

emilykl commented Aug 13, 2026 •

edited

Loading