Zooming in too far breaks axis

[JarLowrey]

The following errors get printed out. I am using createComponent to make a zoomable voronoi chart. I am trying to recreate the bug in JSFiddle but can't seem to import things correctly: https://jsfiddle.net/yjjr4wb9/13/

Uncaught TypeError: Cannot read property 'axis' of undefined
...

The above error occurred in the <VictoryAxis> component:
    in VictoryAxis (at food.jsx:118)
    in svg (created by VictoryZoomVoronoiContainer)
    in div (created by VictoryZoomVoronoiContainer)
    in VictoryZoomVoronoiContainer (at food.jsx:98)
    in VictorySharedEvents (created by VictoryChart)
...

Uncaught TypeError: Cannot read property 'axis' of undefined
    at addEvents.getComponentProps (add-events.js:172)
    at addEvents.renderLine (victory-axis.js:50)
    at addEvents.render (victory-axis.js:148)
    at finishClassComponent (react-dom.development.js:7882)
    at updateClassComponent (react-dom.development.js:7859)
    at beginWork (react-dom.development.js:8233)
    at performUnitOfWork (react-dom.development.js:10215)
    at workLoop (react-dom.development.js:10279)
    at HTMLUnknownElement.callCallback (react-dom.development.js:540)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
    at invokeGuardedCallback (react-dom.development.js:436)
    at renderRoot (react-dom.development.js:10357)
    at performWorkOnRoot (react-dom.development.js:10963)
    at performWork (react-dom.development.js:10916)
    at batchedUpdates (react-dom.development.js:11033)
    at batchedUpdates (react-dom.development.js:2323)
    at dispatchEvent (react-dom.development.js:3414)

[stephanembl]

Same problem, and I am also using createComponent to create a VictoryVoronoiZoomContainer. Any updates?

[JarLowrey]

Nope. I've been away from the project for awhile but will update if I go back and find anything.

[cjtafoya]

It occurs when the base X VictoryAxis scrolls out of view.

Example: A graph with a y domain of [-50, 100]. X axis crosses Y at y=0 initially. When zooming in an area where y > 0, the chart will crash once the X axis has scrolled out of view. Haven't been able to debug yet.

[cjtafoya]

Update: figured out a fix; opening a PR. Need additional null checking in getComponentProps() within addEvents class.

Line 155:
const baseProps = this.baseProps[key] && this.baseProps[key][type] || this.baseProps[key];

PR:
FormidableLabs/victory-core#329

[digitaledge]

The same error appears when zooming VictoryArea in React Native. I merged the PR from cjtafoya, but this did not solve it.

[janortmann]

I think the issue comes from the scale function in zoom-helpers.js. There is a line const point = factor * from + percent * (factor * range); which should be const point = from + percent * (factor * range); Otherwise the center point will not be in the range of the current zoom domain. A quick fix would be to override scale in zoom-helpers.js.

[github-actions]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.