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

Question

Its just basic it the figure that I want. All graphs have a same x axis but different y axis.
I found some type of this in subplots of plotly but they were not exactly as I wanted.
I found another question with answer:
Plotly: How to plot multiple lines with shared x-axis?
But I need it in react.
Thanks!

Answer 1

Use library. One of a powerful library for plotting charts is echarts. Have following link for reviewing examples:
https://echarts.apache.org/examples/en/

Answer 2

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/

Answer 3

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

Answer 4

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
}