"Cannot read property 'hoverSeries' of undefined" error when switching series types

[codingarmadillo]

I'm trying to switch between line and column displays dynamically, but I get the following error when switching

Cannot read property 'hoverSeries' of undefined

I've created a minimal component that replicates the problem---checkbox that toggles the series. When I make the first switch, the series colour disappears, so something's presumably wrong at that point. Then, when I switch back, I get the error.

I'm using React 16.0, Highcharts 5.0.14 and React JSX Highcharts 1.3.4.

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

const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

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

        this.state = {
            lineChart: true
        };
    }

    getSeries = () =>
        this.state.lineChart
            ? <LineSeries id='series1' data={[...data]}/>
            : <ColumnSeries id='series1' data={[...data]}/>;

    render() {
        return (
            <div>
                Line chart
                <input type='checkbox'
                       checked={this.state.lineChart}
                       onChange={event => { this.setState({ lineChart: event.target.checked}); }}/>

                <HighchartsChart>
                    <Chart/>

                    <XAxis />

                    <YAxis id="axis1">
                        {this.getSeries()}
                    </YAxis>
                </HighchartsChart>
            </div>
        );
    }
}

export default App;

[whawker]

I would guess, that the problem is that when the switch between LineSeries and ColumnSeries occurs, the LineSeries component unmounts - which causes the series to be removed.

I would suggest to use the Series component directly. Series is the base component anyway - all the named series are just for convenience, they just pre-populate the type prop for you.

Something like...

<Series type={this.state.seriesType} id="series1" data={[...data]} />

This way, when the series type switches, no unmounting occurs and the series isn't removed.

Let me know if that doesn't make sense, or doesn't work as I suggest.

[codingarmadillo]

Great! That seems to work and made my code easier. Win-Win. Thank you.