How to plot multiple lines with shared x-axis in react?

Use library. One of a powerful library for plotting charts is echarts. Have following link for reviewing examples:

https://echarts.apache.org/examples/en/

I think this Library has the feature you are looking. But please see license before using :-)

https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/Overview/jQuery/Light/

I found a simple react library called Rechart.

The graphs is called Synchronized Line chart. You can meddle around with the UI to get your desired result. http://recharts.org/en-US/examples/SynchronizedLineChart

This is a good question - it's not readily obvious how to do this with Plotly in React. Although Plotly's docs explain the syntax well for vanillaJS it does require some adapting. I was able to get this working, and following along with this video on YouTube was helpful.

In short, since the <Plot /> component for React accepts a property called 'data' which expects an array, you need to call a function here that returns an array of Plotly Trace objects. The component might look something like this, depending on your options etc:

<Plot
    data={createLines()}
    layout={{ width: 960, height: 600 //...etc }}
/>

Note: My data formatting may be a bit different than others...I have a multiple lines to plot on the Y axis, with the x-axis all sharing an array of timesteps? Either way, you'll want to pass in the same array of data for your x axis to each line chart trace. I'm handing my component a prop called 'lineData' which looks like this, where each key is the variable name the user has selected, and the value is the array of data points to use on the y Axis:

//props.lineData would log like below, where each key becomes the name of a line
[
   {"lineOne": [1, 3, 14, 37 ...]},
   {"lineTwo": [14, 87, 12, 9 ...]}
]

Here is my createLines function below...note that I'm using props.timeData on the x axis for each trace:

const createLines = () => {
        let traces = [];
        props.lineData.map(line => {
            Object.entries(line).forEach(([key, value])=>{
                traces.push({
                    name: key,
                    x: props.timeData,
                    y: value,
                    type: 'scatter',
                    mode: 'lines'
                })
            })
        })
        return traces
    }