Automatically update Plotly React Chart when data changes

Question

The below react code renders a chart that is updated with additional data when a button is pressed. The count state is passed into the BarChart function as a prop. However, the chart does not automatically update when the data changes. How can this be achieved?

import React, { useState, useEffect } from 'react';
import Plot from 'react-plotly.js';
function main() {
  const [count, setCount] = useState([1,2,3]);
  return(
    <>
    <BarChart value={count}/>
    <button onClick={() => setCount([...count, 123])}/>
    </>
  )
}

const BarChart = (count) => {

    return (
        <div>
        <Plot
            data={[
                {type: 'scatter',
                x: ['one','two','three'],
                y: count,
                marker: {color: 'red'}
                }]}
            layout={{width: 1000, height: 500, title: "hello"}}
            
        />
    </div>
    )
}

Bialson · Accepted Answer · 2022-11-18 22:26:20Z

This code doesn't affect on plot data. First of all you can't pass variable to children component in that way. You should do it via props. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. I revrited your code to make it more readable.

const App = () => {
    const [count, setCount] = useState([1, 2, 3]);
    return (
        <>
            <BarChart value={count} />
            <button
                onClick={() =>
                    setCount([...count, count.at(count.length - 1) + 1])
                }
            >
                Update
            </button>
        </>
    );
};

If you click on Update button new item will be pushed to it's end. Next the count array is passed to BarChart component as value attribute.

If you interact with plot, all previous information will be lost. Solution for this is storing plot data in state variable. Initial x & y data are gathered from passed count variable (props.value) to plot component.

const BarChart = (props) => {
    const [settings, updateSettings] = useState({
        data: [
            {
                x: props.value,
                y: props.value,
                type: 'scatter',
                marker: { color: 'red' },
            },
        ],
        layout: { width: '100%', height: 500, title: 'hello' },
        frames: {},
        config: {},
    });
    useEffect(() => {
        updateSettings((settings) => ({
            ...settings,
            data: [{ ...settings.data[0], y: props.value, x: props.value }],
        }));
    }, [props.value]);
    return (
        <div>
            <Plot data={settings.data} layout={settings.layout} />
        </div>
    );
};

If count variable in parent component has been changed, it will activate update event in children component (componentDidUpdate() or useEffect()). In this case I used useEffect(). Hook will execute always if props.value value has been changed. Then it will update data arrays from gathered data and re-render plot with new data.

Collectives™ on Stack Overflow

Automatically update Plotly React Chart when data changes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related