Re rending issue for Spline Chart

[hunainaslam]

I've built a spline mirror chart, I've set all initial values in the constructor and the chart loads perfectly fine. The issue occurs when I try to update, I just don't want to update the series. I want to update the whole chart including x and y axis as those values are dynamic.

Here is the initial state

this.state = {
            chartOptions: {
                credits: {
                    enabled: false
                },
                time: {
                    timezone: ''
                },
                chart: {
                    backgroundColor: '#272727',
                    zoomType: 'x',
                    panning: true
                },
                title: {
                    text: null,
                    style: {
                        color: '#E0E0E0',
                        fontSize: '20px'
                    },
                    align: 'left'
                },
                legend: {
                    useHTML: true,
                    borderWidth: 0,
                    itemMarginBottom: 5,
                    itemStyle: {
                        color: '#E0E0E0',
                        fontWeight: 'normal',
                        fontSize: '11px'
                    }
                },

                tooltip: {
                    useHTML: true,
                    followPointer: false,
                    formatter: function(){
                        return this.points.reduce(function(s, point){
                            let positiveValue = Highcharts.numberFormat(Math.abs(point.y), 0);
                            return '<div style="display: none;"><p style="display: none;font-size: 14px; margin: 2px 3px 2px 3px; color:#414549;">' + positiveValue + ' ' + point.series.name + '</p>';
                        }, '<p style="display: none;font-size: 11px;  margin: 0px 3px 4px 3px; color: #7C7D80;"> Sustained at: ' + Highcharts.dateFormat('%H:%M:%S.%L', this.x) + '</p></div>');
                    },
                    shared: true,
                    borderWidth: 0,
                    borderRadius: 5,
                    padding: 10,
                    style: {
                        opacity: 0,
                        backgroundColor: '#272727'
                    }
                },

                xAxis: {
                    type: 'datetime',
                    lineColor: '#9F9F9F',
                    tickColor: '#9F9F9F',
                    tickLength: 0,
                    labels: {
                        style: {
                            color: '#9F9F9F'
                        }
                    },
                    index: 2,
                    min: startTime,
                    max: endTime
                },

                yAxis: [
                    {
                        // Primary yAxis
                        min: 0,
                        tickAmount: 3,
                        gridLineColor: '#474747',
                        gridLineWidth: 1,
                        title: {
                            text: null
                        },
                        opposite: true,
                        height: '50%',
                        plotLines: [
                            {
                                color: '#E0E0E0',
                                width: 1,
                                value: 0,
                                zIndex: 2
                            }
                        ]
                    },
                    {
                        // Secondary yAxis
                        //reversed: true,
                        max: 0,
                        tickAmount: 3,
                        gridLineColor: '#474747',
                        gridLineWidth: 1,
                        title: {
                            text: null
                        },
                        labels: {
                            format: '{value} Gs',
                            formatter: function(){
                                let positiveValue = Highcharts.numberFormat(Math.abs(this.value), 0);
                                return positiveValue;
                            }
                        },
                        top: '50%',
                        height: '50%',
                        plotLines: [
                            {
                                color: 'white',
                                width: 1,
                                value: 0,
                                dashStyle: 'shortdot',
                                zIndex: 2
                            }
                        ]
                    }
                ],
                annotations: [
                    {
                        shapes: chartAnnotations
                    }
                ],

                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function(e){
                                    try {
                                        var return_object = {
                                            x: this.x,
                                            y: this.y,
                                            id: e.point.impact,
                                            max_rotational: e.point.impact_max_rotational,
                                            max_linear: e.point.impact_max_linear,
                                            category: e.point.category
                                        };

                                        window.postMessage(JSON.stringify(return_object));
                                        return;

                                        function examine_variable(object_to_examine){
                                            function get_class(object){
                                                return Object.prototype.toString.call(object);
                                            }
                                            var event_objects = {};
                                            // So here we can get get e.point.index.

                                            for (var k in object_to_examine) {
                                                var sub_key_count = 0;
                                                var type = get_class(object_to_examine[k]);
                                                if (type == '[object String]') {
                                                    event_objects[k] = object_to_examine[k];
                                                } else if (type == '[object Object]') {
                                                    event_objects[k] = {};
                                                    // Go a second level deep:
                                                    for (var k2 in object_to_examine[k]) {
                                                        sub_key_count++;
                                                        event_objects[k][k2] = '' + object_to_examine[k][k2];
                                                    }
                                                } else event_objects[k] = '' + object_to_examine[k];
                                            }
                                            window.postMessage(JSON.stringify(event_objects));
                                        }

                                        window.postMessage("Examining the event 'e' variable");
                                        examine_variable(e);
                                        if (e.point) {
                                            window.postMessage("Examining the event 'e.point' variable");
                                            examine_variable(e.point);
                                        }
                                        window.postMessage("Examining whtever 'this' is");
                                        examine_variable(this);
                                    } catch (exception) {
                                        window.postMessage('Exception in the highcharts click: ' + exception);
                                    }
                                }
                            }
                        }
                    }
                },
                series: [
                    {
                        data: maxLinearDataset,
                        name: '<span style="position: relative; top:2px">Gs</span>',
                        type: 'spline',
                        color: maxLinearColor,
                        yAxis: 1,
                        lineWidth: 0,
                        marker: {
                            symbol: 'circle',
                            enabled: true,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            },
                            radius: 5
                        },
                        states: {
                            hover: {
                                lineWidthPlus: 0
                            }
                        },
                        tooltip: {
                            valueSuffix: ' Gs',
                            valueDecimals: 0
                        }
                    },
                    {
                        name: '<span>rad/s<sup>2</sup></span>',
                        type: 'spline',
                        data: maxRotationalDataset,
                        color: maxRotationalColor,
                        lineWidth: 0,
                        marker: {
                            symbol: 'circle',
                            enabled: true,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            },
                            radius: 5
                        },
                        states: {
                            hover: {
                                lineWidthPlus: 0
                            }
                        },
                        tooltip: {
                            valueSuffix: ' <span>rad/s<sup>2</sup></span>',
                            valueDecimals: 0
                        }
                    }
                ]
            }
        };

The chart looks like this, which is the desired behaviour

After the values are updated I would like to redraw the chart with new data but when I

this.setState ({
            chartOptions: {
                credits: {
                    enabled: false
                },
                time: {
                    timezone: ''
                },
                chart: {
                    backgroundColor: '#272727',
                    zoomType: 'x',
                    panning: true
                },
                title: {
                    text: null,
                    style: {
                        color: '#E0E0E0',
                        fontSize: '20px'
                    },
                    align: 'left'
                },
                legend: {
                    useHTML: true,
                    borderWidth: 0,
                    itemMarginBottom: 5,
                    itemStyle: {
                        color: '#E0E0E0',
                        fontWeight: 'normal',
                        fontSize: '11px'
                    }
                },

                tooltip: {
                    // enabled: false,
                    useHTML: true,
                    followPointer: false,
                    formatter: function(){
                        return this.points.reduce(function(s, point){
                            let positiveValue = Highcharts.numberFormat(Math.abs(point.y), 0);
                            return '<div style="display: none;"><p style="display: none;font-size: 14px; margin: 2px 3px 2px 3px; color:#414549;">' + positiveValue + ' ' + point.series.name + '</p>';
                        }, '<p style="display: none;font-size: 11px;  margin: 0px 3px 4px 3px; color: #7C7D80;"> Sustained at: ' + Highcharts.dateFormat('%H:%M:%S.%L', this.x) + '</p></div>');
                    },
                    shared: true,
                    borderWidth: 0,
                    borderRadius: 5,
                    padding: 10,
                    style: {
                        opacity: 0,
                        backgroundColor: '#272727'
                    }
                },

                xAxis: {
                    type: 'datetime',
                    lineColor: '#9F9F9F',
                    tickColor: '#9F9F9F',
                    tickLength: 0,
                    labels: {
                        style: {
                            color: '#9F9F9F'
                        }
                    },
                    index: 2,
                    min: startTime,
                    max: endTime
                },

                yAxis: [
                    {
                        // Primary yAxis
                        min: 0,
                        tickAmount: 3,
                        gridLineColor: '#474747',
                        gridLineWidth: 1,
                        title: {
                            text: null
                        },
                        opposite: true,
                        height: '50%',
                        plotLines: [
                            {
                                color: '#E0E0E0',
                                width: 1,
                                value: 0,
                                zIndex: 2
                            }
                        ]
                    },
                    {
                        // Secondary yAxis
                        //reversed: true,
                        max: 0,
                        tickAmount: 3,
                        gridLineColor: '#474747',
                        gridLineWidth: 1,
                        title: {
                            text: null
                        },
                        labels: {
                            format: '{value} Gs',
                            formatter: function(){
                                let positiveValue = Highcharts.numberFormat(Math.abs(this.value), 0);
                                return positiveValue;
                            }
                        },
                        top: '50%',
                        height: '50%',
                        plotLines: [
                            {
                                color: 'white',
                                width: 1,
                                value: 0,
                                dashStyle: 'shortdot',
                                zIndex: 2
                            }
                        ]
                    }
                ],
                annotations: [
                    {
                        shapes: chartAnnotations
                    }
                ],

                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function(e){
                                    try {
                                        var return_object = {
                                            x: this.x,
                                            y: this.y,
                                            id: e.point.impact,
                                            max_rotational: e.point.impact_max_rotational,
                                            max_linear: e.point.impact_max_linear,
                                            category: e.point.category
                                        };

                                        window.postMessage(JSON.stringify(return_object));
                                        return;

                                        function examine_variable(object_to_examine){
                                            // Examine the event object or some other local object to see
                                            // what we can pass
                                            function get_class(object){
                                                return Object.prototype.toString.call(object);
                                            }
                                            var event_objects = {};
                                            // So here we can get get e.point.index.

                                            for (var k in object_to_examine) {
                                                var sub_key_count = 0;
                                                var type = get_class(object_to_examine[k]);
                                                if (type == '[object String]') {
                                                    event_objects[k] = object_to_examine[k];
                                                } else if (type == '[object Object]') {
                                                    event_objects[k] = {};
                                                    // Go a second level deep:
                                                    for (var k2 in object_to_examine[k]) {
                                                        sub_key_count++;
                                                        event_objects[k][k2] = '' + object_to_examine[k][k2];
                                                    }
                                                } else event_objects[k] = '' + object_to_examine[k];
                                            }
                                            window.postMessage(JSON.stringify(event_objects));
                                        }

                                        window.postMessage("Examining the event 'e' variable");
                                        examine_variable(e);
                                        if (e.point) {
                                            window.postMessage("Examining the event 'e.point' variable");
                                            examine_variable(e.point);
                                        }
                                        window.postMessage("Examining whtever 'this' is");
                                        examine_variable(this);
                                    } catch (exception) {
                                        window.postMessage('Exception in the highcharts click: ' + exception);
                                    }
                                }
                            }
                        }
                    }
                },
                series: [
                    {
                        data: maxLinearDataset,
                        name: '<span style="position: relative; top:2px">Gs</span>',
                        type: 'spline',
                        color: maxLinearColor,
                        yAxis: 1,
                        lineWidth: 0,
                        marker: {
                            symbol: 'circle',
                            enabled: true,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            },
                            radius: 5
                        },
                        states: {
                            hover: {
                                lineWidthPlus: 0
                            }
                        },
                        tooltip: {
                            valueSuffix: ' Gs',
                            valueDecimals: 0
                        }
                    },
                    {
                        name: '<span>rad/s<sup>2</sup></span>',
                        type: 'spline',
                        data: maxRotationalDataset,
                        color: maxRotationalColor,
                        lineWidth: 0,
                        marker: {
                            symbol: 'circle',
                            enabled: true,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            },
                            radius: 5
                        },
                        states: {
                            hover: {
                                lineWidthPlus: 0
                            }
                        },
                        tooltip: {
                            valueSuffix: ' <span>rad/s<sup>2</sup></span>',
                            valueDecimals: 0
                        }
                    }
                ]
            }
        });

Chart looks like this

Is there a way I can redraw the chart not update?