Skip to content

Chart crashes while hovering mouse when x-axis is datetime #7357

@yoshiokatsuneo

Description

@yoshiokatsuneo

Issue Summary

Redash chart crashes while hovering mouse when x-axis value is datetime.

Steps to Reproduce

  1. Create a following query (on QueryResult datasource, for example.)
with tbl as (
    select DATE('2025-02-01') as t, 0 as grp, 1 as cnt
    union all
    select DATE('2025-03-02') as t, 2 as grp, 2 as cnt
    union all
    select DATE('2025-03-03') as t, 8 as grp, 7 as cnt
)
select * from tbl
Image
  1. Create line chart with grouping.
Image
  1. Hover mouse on the chart and move between "2025-03-02" and "2025-03-03".
Image
  1. Redash UI crashes.

Error message:
"It seems like we encountered an error. Try refreshing this page or contact your administrator."

Image

Chrome console shows following error

TypeError: Cannot read properties of null (reading 'textContent')
    at Z.text (d3.js:788:15)
    at t.convertToTspans (svg_text_utils.js:30:24)
    at Z.call (d3.js:975:14)
    at SVGGElement.<anonymous> (hover.js:1162:18)
    at d3.js:962:16
    at pe (d3.js:968:30)
    at Z.each (d3.js:961:12)
    at A (hover.js:1111:17)
    at hover.js:725:23
    at hover.js:80:22
Image

Technical details:

  • Redash Version: 25.03.0-dev (3275a9e)
  • Browser/OS: Chrome / Mac OS
  • How did you install Redash: built from source code.

The cause of the error

When x-axis is datetime, the label is shown like "May 2, 2025" including white space.

But, plotly.js(verion 1) uses the value before the first space as the key of the label.

https://github.com/plotly/plotly.js/blob/v1.58.5/src/components/fx/hover.js#L783

var commonAttr = hovermode.charAt(0) === 'y' ? 'yLabel' : 'xLabel';
var t0 = c0[commonAttr];
var t00 = (String(t0) || '').split(' ')[0];
...

    function filterClosePoints(hoverData) {
        return hoverData.filter(function(d) {
            return (d.zLabelVal !== undefined) ||
                (d[commonAttr] || '').split(' ')[0] === t00;
        });
    }

This makes plotly.js unstable, and cause exception.

I think upgrading plotly.js to version 2 or 3 will solve the issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions