Пакет highchart для реакта. Ошибка "Cannot read properties of undefined (reading 'data')"

  1. При использовании real live графика, при создании каждой новой точки, вылетает сообщение об ошибке: " Cannot read properties of undefined (reading 'data')". Ошибка

    Мой код данной jsx страницы:

import React from "react";
import { render } from "react-dom";
            import Highcharts from "highcharts"; 
import HighchartsReact from
            "highcharts-react-official"; 
const style = {
                display: "block",
                alignItems: "center",
                justifyContent: "center",
                border: "solid 1px #00000",
                background: "#f7c744",
                borderRadius: "20px" }; const options = {
                chart: {
                    type: 'spline',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10,
                    events: {
                        load: function () {
                            // set up the updating of the chart each second
                            var series = this.series[0];
                            setInterval(function () {
                                var x = (new Date()).getTime(), // currenttime
                                    y = Math.random();
                                series.addPoint([x, y,], true, true);
                            }, 1000);
                        }
                    }
                },
                time: {
                    useUTC: false
                },
                title: {
                    text: 'Live random data'
                },
                accessibility: {
                    announceNewData: {
                        enabled: true,
                        minAnnounceInterval: 15000,
                        announcementFormatter: function ( newPoint) {
                            if (newPoint) {
                                return 'New point added. Value: ' + newPoint.y;
                            }
                            return false;
                        }
                    }
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150
                },
                yAxis: {
                    title: {
                        text: 'Value'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    headerFormat: '<b>{series.name}</b><br/>',
                    pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
                },
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                series: [{
                    name: 'Random data',
                    data: (function () {
                        // generate an array of random data
                        var data = [],
                            time = (new Date()).getTime(),
                            i;
                        
                        for (i = -19; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 1000,
                                y: Math.random()
                            });
                        }
                        return data;
                        
                    }())
                }] }; class Demo extends React.Component {
                constructor(props) {
                    super(props);
                    this.state = {
                        mappanelheight: "41%",
                        mappanelwidth: "20%"
                    };
                    this.chartComponent = React.createRef(null);
                }
                render() {
                    return (
                        <div >
                           
                                <HighchartsReact
                                    options={options}
                                    ref={this.chartComponent}
                                />
                            
                        </div>
                    );
                } } render(<Demo />, document.getElementById("root")); export default Demo;
        

Ответы (0 шт):