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.

Sign up for GitHub

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

Jump to bottom

Crash when toggling a second (opposite) Y-Axis #38

Closed
codingarmadillo opened this issue Oct 19, 2017 · 7 comments
Closed

Crash when toggling a second (opposite) Y-Axis #38

codingarmadillo opened this issue Oct 19, 2017 · 7 comments
Labels
bug

Comments

@codingarmadillo
Copy link

I have a second Y-Axis that I toggle on and off. After two cycles (on/off/on/off), I get a crash---every time (i.e. perfectly repeatable).

The problem seems to be with the <YAxis.Title/> component in the secondary series. If I remove that, it all works fine.

I've created a minimal App component that recreates the issue.

  • react-jsx-highcharts@2.0.0

  • highcharts@6.0.1

      import React, {Component} from 'react';
  import highcharts from 'highcharts';
  import { HighchartsChart, Chart, XAxis, YAxis, LineSeries, withHighcharts } from 'react-jsx-highcharts';

  class App extends Component {
      constructor(props) {
          super(props);

          this.state = {
              showSecondarySeries: false
          };
      }

      render() {
          return (
              <div style={{ margin: 20 }}>
                  <div style={{ marginBottom: 20 }}>
                      <button onClick={() => this.setState({
                          showSecondarySeries: !this.state.showSecondarySeries
                      })}>Toggle data</button>
                  </div>

                  <HighchartsChart>
                      <Chart/>

                      <XAxis/>

                      <YAxis id="yAxisPrimary">
                          <YAxis.Title>Primary</YAxis.Title>
                          <LineSeries id='primary' data={[ 1, 2, 3, 4, 5 ]}/>
                      </YAxis>

                      {this.state.showSecondarySeries
                          ?
                              <YAxis id="yAxisSecondary" opposite>
                                  <YAxis.Title opposite>Secondary</YAxis.Title>
                                  <LineSeries id='secondary' data={[ 5, 4, 3, 2, 1 ]}/>
                              </YAxis>
                          : undefined}
                  </HighchartsChart>
              </div>
          );
      }
  }

  export default withHighcharts(App, highcharts);

Stack trace is:

highcharts.js:317 Uncaught TypeError: Cannot read property 'options' of undefined
    at H.update (highcharts.js:317)
    at react-jsx-highcharts.min.js:1
    at Object.update (react-jsx-highcharts.min.js:1)
    at n.value (react-jsx-highcharts.min.js:1)
    at n.value (react-jsx-highcharts.min.js:1)
    at callComponentWillUnmountWithTimerInDev (react-dom.development.js:11117)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at safelyCallComponentWillUnmount (react-dom.development.js:11125)
    at commitUnmount (react-dom.development.js:11415)
    at unmountHostComponents (react-dom.development.js:11356)
    at commitDeletion (react-dom.development.js:11386)
    at commitAllHostEffects (react-dom.development.js:12271)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at commitAllWork (react-dom.development.js:12376)
    at workLoop (react-dom.development.js:12687)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at performWork (react-dom.development.js:12800)
    at batchedUpdates (react-dom.development.js:13244)
    at performFiberBatchedUpdates (react-dom.development.js:1646)
    at stackBatchedUpdates (react-dom.development.js:1637)
    at batchedUpdates (react-dom.development.js:1651)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js:1664)
    at dispatchEvent (react-dom.development.js:1874)
update @ highcharts.js:317
(anonymous) @ react-jsx-highcharts.min.js:1
(anonymous) @ react-jsx-highcharts.min.js:1
value @ react-jsx-highcharts.min.js:1
value @ react-jsx-highcharts.min.js:1
callComponentWillUnmountWithTimerInDev @ react-dom.development.js:11117
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
safelyCallComponentWillUnmount @ react-dom.development.js:11125
commitUnmount @ react-dom.development.js:11415
unmountHostComponents @ react-dom.development.js:11356
commitDeletion @ react-dom.development.js:11386
commitAllHostEffects @ react-dom.development.js:12271
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
commitAllWork @ react-dom.development.js:12376
workLoop @ react-dom.development.js:12687
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
proxyConsole.js:54 The above error occurred in the <n> component:
    in n (created by AxisProvider(n))
    in AxisProvider(n) (created by ChartProvider(AxisProvider(n)))
    in ChartProvider(AxisProvider(n)) (created by HighchartsProvider(ChartProvider(AxisProvider(n))))
    in HighchartsProvider(ChartProvider(AxisProvider(n))) (at App.js:36)
    in n (created by n)
    in n (created by AxisProvider(n))
    in AxisProvider(n) (created by ChartProvider(AxisProvider(n)))
    in ChartProvider(AxisProvider(n)) (created by HighchartsProvider(ChartProvider(AxisProvider(n))))
    in HighchartsProvider(ChartProvider(AxisProvider(n))) (created by n)
    in n (at App.js:35)
    in div (created by n)
    in n (created by n)
    in n (created by HighchartsProvider(n))
    in HighchartsProvider(n) (at App.js:23)
    in div (at App.js:16)
    in App (created by withHighcharts(App))
    in withHighcharts(App) (at index.js:6)

Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.
__stack_frame_overlay_proxy_console__ @ proxyConsole.js:54
logCapturedError$1 @ react-dom.development.js:8305
captureError @ react-dom.development.js:12993
safelyCallComponentWillUnmount @ react-dom.development.js:11128
commitUnmount @ react-dom.development.js:11415
unmountHostComponents @ react-dom.development.js:11356
commitDeletion @ react-dom.development.js:11386
commitAllHostEffects @ react-dom.development.js:12271
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
commitAllWork @ react-dom.development.js:12376
workLoop @ react-dom.development.js:12687
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
highcharts.js:317 Uncaught TypeError: Cannot read property 'options' of undefined
    at H.update (highcharts.js:317)
    at react-jsx-highcharts.min.js:1
    at Object.update (react-jsx-highcharts.min.js:1)
    at n.value (react-jsx-highcharts.min.js:1)
    at n.value (react-jsx-highcharts.min.js:1)
    at callComponentWillUnmountWithTimerInDev (react-dom.development.js:11117)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at safelyCallComponentWillUnmount (react-dom.development.js:11125)
    at commitUnmount (react-dom.development.js:11415)
    at unmountHostComponents (react-dom.development.js:11356)
    at commitDeletion (react-dom.development.js:11386)
    at commitAllHostEffects (react-dom.development.js:12271)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at commitAllWork (react-dom.development.js:12376)
    at workLoop (react-dom.development.js:12687)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at performWork (react-dom.development.js:12800)
    at batchedUpdates (react-dom.development.js:13244)
    at performFiberBatchedUpdates (react-dom.development.js:1646)
    at stackBatchedUpdates (react-dom.development.js:1637)
    at batchedUpdates (react-dom.development.js:1651)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js:1664)
    at dispatchEvent (react-dom.development.js:1874)
update @ highcharts.js:317
(anonymous) @ react-jsx-highcharts.min.js:1
(anonymous) @ react-jsx-highcharts.min.js:1
value @ react-jsx-highcharts.min.js:1
value @ react-jsx-highcharts.min.js:1
callComponentWillUnmountWithTimerInDev @ react-dom.development.js:11117
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
safelyCallComponentWillUnmount @ react-dom.development.js:11125
commitUnmount @ react-dom.development.js:11415
unmountHostComponents @ react-dom.development.js:11356
commitDeletion @ react-dom.development.js:11386
commitAllHostEffects @ react-dom.development.js:12271
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
commitAllWork @ react-dom.development.js:12376
workLoop @ react-dom.development.js:12687
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
@whawker
Copy link
Owner

whawker commented Oct 20, 2017

Hmm interesting, and thanks for the reproducible test case!

I'll look into it, in the meantime, I think you could workaround the issue by using a title prop on the YAxis, instead of the child YAxis.Title component. It's a lot messier looking (in my opinion) but should unblock you.

<YAxis id="yAxisSecondary" title={{ text: 'Secondary' }} opposite>
  <LineSeries id='secondary' data={[ 5, 4, 3, 2, 1 ]}/>
</YAxis>

@whawker whawker added the bug label Oct 20, 2017
@codingarmadillo
Copy link
Author

Yes. Your workaround works. Thanks.

And I agree that your approach with the Title components is cleaner. Feels more idiomatic.

Thanks for all the great work on this, by the way. Very handy library.

@codingarmadillo
Copy link
Author

When I make that change I end up with a "double" opposite axis (i.e. the axis title and scale appear twice) and the opposite axis title remains when I disable that series. No console errors.

@codingarmadillo
Copy link
Author

Added the modified code as a gist:

https://gist.github.com/codingarmadillo/656e4a44b69fe3c48748f23d0fba0fce

@whawker
Copy link
Owner

whawker commented Oct 20, 2017

Oh dear, that's a bit rubbish. Seems the axis doesn't receive the remove function when it mounts, so it doesn't call it when it unmounts.

I think the Title sub component masked this second bug as it causes an axis update, which then caused the remove prop to be properly populated.

I'll investigate this urgently.

whawker pushed a commit that referenced this issue Oct 21, 2017
Add bug report from #38 as a hidden example
33947f0
whawker pushed a commit that referenced this issue Oct 21, 2017
Don't bind methods until they are called. Fixes #38
dee179e
@whawker
Copy link
Owner

whawker commented Oct 23, 2017

Morning, so I've just published react-jsx-highcharts@2.0.1-beta.1. Would you mind verifying that it fixes your original issue? It fixes the slimmed down examples you provided.

@codingarmadillo
Copy link
Author

Yes, that appears to be working in the actual application too. Looks good. Thanks for your help.

whawker pushed a commit that referenced this issue Oct 23, 2017
Add bug report from #38 as a hidden example
328915a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@codingarmadillo @whawker