Revision history [back]

1. Install Plotly and React-Plotly via npm:

npm install plotly.js-react plotly.js

1. Import Plotly and React-Plotly modules to your component:

import Plot from 'react-plotly.js';
import Plotly from 'plotly.js';

1. Create a state for the JSON response and set it to an empty array:

const [jsonData, setJsonData] = useState([]);

1. Fetch the JSON data from your API:

useEffect(() => {
    fetch('your-endpoint')
    .then(response => response.json())
    .then(data => setJsonData(data))
}, []);

1. Map through the JSON data and create an object with the necessary properties for your Plotly chart:

const plotData = [{
    x: jsonData.map(item => item.x),
    y: jsonData.map(item => item.y),
    type: 'scatter'
}];

1. Render the Plot component and pass the plotData object as a prop:

<Plot
    data={plotData}
    layout={{
        title: 'Your Graph Title'
    }}
/>

1. Your Plotly graph should now be displayed in your React component, receiving data from your JSON response.