Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Area range chart: zoom in to see markers then reset zoom crash the chart #18080

Closed
Ptitpim opened this issue Dec 2, 2022 · 2 comments · Fixed by #18104
Closed

Area range chart: zoom in to see markers then reset zoom crash the chart #18080

Ptitpim opened this issue Dec 2, 2022 · 2 comments · Fixed by #18104

Comments

@Ptitpim
Copy link

Ptitpim commented Dec 2, 2022

Expected behaviour

Zooming in then zooming out in an area range chart should not cause chart crash.

Actual behaviour

I have this issue in my React project and I've discovered that this issue can be reproduced in the official Highcharts demo page and in the jsfiddle demo.

In an area range chart with a large series of points, the markers should not appear, it's important (example on: Highcharts demo page)

arearange_display

select a part of the chart to zoom in until you show the markers (blue points):

zoomed

then click the "Reset zoom" button on the top right corner to zoom out.
At this step no problem, but if you try to select again a part of the chart to zoom in, or in my case if I navigate to an other application page (through React Router), you will have errors in the Devtools console, like:

highcharts.src.js:9858 Uncaught TypeError: Cannot read properties of undefined (reading 'isSVG')
    at a.destroy (highcharts.src.js:9858:38)
    at highcharts.src.js:25846:35
    at Array.forEach (<anonymous>)
    at k.destroyElements (highcharts.src.js:25845:17)
    at a.generatePoints (highcharts.src.js:37220:29)
    at a.translate (highcharts.src.js:37409:17)
    at a.redraw (highcharts.src.js:38396:17)
    at highcharts.src.js:30939:25
    at Array.forEach (<anonymous>)
    at a.redraw (highcharts.src.js:30937:17)

and then if you move your mouse over the chart, you will have tons of errors in the console, like:

highcharts.src.js:9104 Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute')
    at a._defaultSetter (highcharts.src.js:9104:17)
    at a.<anonymous> (highcharts.src.js:9547:29)
    at I (highcharts.src.js:1309:21)
    at a.attr (highcharts.src.js:9525:21)
    at a.removeClass (highcharts.src.js:10322:24)
    at k.setState (highcharts.src.js:26581:25)
    at b.setState (highcharts-more.src.js:585:17)
    at highcharts.src.js:28233:29
    at Array.forEach (<anonymous>)
    at a.runPointActions (highcharts.src.js:28231:21)

Live demo with steps to reproduce

You can reproduce in the Highcharts demo page or in the jsfiddle demo or in the codepen example page.

The fact that you have to display a chart with a lot of points (so Highcharts don't display marker tiny points) is important. If you try with a short series of points, Highcharts will display markers, then you can zoom in and zoom out, you will not encounter this issue.

Product version

  • highcharts: 10.3.2
  • highcharts-react-official: 3.1.0
  • react 17.0.2
  • react-dom: 17.0.2

Affected browser(s)

Chrome 107.0.5304.110 (Build officiel) (arm64) for this demo screenshots, but others browsers like Firefox are affected.

@bm64
Copy link
Member

bm64 commented Dec 5, 2022

Hello @Ptitpim and thanks for reporting the issue.

Internal note:
Bisected to: b84e453
FYI @TorsteinHonsi

@TorsteinHonsi
Copy link
Collaborator

Thanks! Will you investigate, @bm64?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants