HighCharts Live Data using mqtt

Question

I am trying to prepare live chart using react and highcharts. I am using react-mqtt to retrieve live data and passing the data as props to Highchart component.

The Chart is rendering but, every time the data comes, it's rerendering the component.

My Expectation is, it should flow like a heartbeat graph. but a multi-line heartbeat.

Homepage:

            import React from 'react';
            import { Helmet } from 'react-helmet';
            import { FormattedMessage } from 'react-intl';
            import { connect } from 'react-redux';
            import { compose } from 'redux';
            import { createStructuredSelector } from 'reselect';

            import Chart from 'components/HighCharts';

            import { Connector } from 'mqtt-react';
            import {subscribe} from 'mqtt-react';

            const MessageContainer = subscribe({topic: 'system_monitor'})(Chart);

            export class HomePage extends React.PureComponent {

            render() {
                return (
                <article>
                    <Helmet>
                    <title>Home Page</title>
                    <meta name="description" content="A React.js Boilerplate application homepage" />
                    </Helmet>
                    <div>
                    <Connector mqttProps="ws://localhost:1884/">
                    <MessageContainer/>
                    </Connector>
                    </div>
                </article>
                );
            }
            }

HighChart Component Code:

            import React, { Component } from 'react';
            import HighCharts from 'react-highcharts';

            export default class SplineChart extends Component {

                constructor(props) {
                    super(props);
                    this.config = {
                        chart: {
                            type: 'spline',
                            animation: HighCharts.svg,
                            marginRight: 10,
                            width: 700,
                            height: 360,
                        },
                        title: {
                            text: 'RFID Chart'
                        },
                        legend: {
                            enabled: true
                        },
                        exporting: {
                            enabled: false
                        },
                        xAxis: {
                            type: 'datetime',
                            dateTimeLabelFormats: {
                                hour: '%I',
                                minute: '%I:%M',
                                seconds: '%I:%M:%S'
                            },
                            title: {
                                text: 'Time'
                            }
                        },
                        yAxis: {
                            title: {
                                text: 'Heart Beat'
                            }
                        },
                        series: this.props.data
                    }
                }

                render() {
                    console.log(this.props.data)
                    return (
                        <div>
                            <HighCharts config={this.config}></HighCharts>
                        </div>
                    );
                }
            }

Answer 1

check accessing-highcharts-api-after-render and use addPoint() to add points dynamically.

  componentDidMount() {
    let chart = this.refs.chart.getChart();
    //chart.series[0].addPoint({x: 10, y: 12});

    //below is for demo    
    // set up the updating of the chart each second
    var series = chart.series[0];
    setInterval(function () {
      var x = (new Date()).getTime(), // current time
        y = Math.random();
      series.addPoint([x, y], true, true);
    }, 1000);

  }

stackblitz demo