When I create the plot, I give it a layout parameter and I know I can set an x-axis title but I would like to change the x-axis title based on which plot I'm showing based on an event trigger.
Where I create the plot: (Plotting.js)
<Plot
data={[]}
revision={this.state.revision}
config = {{displayModeBar: true, modeBarButtonsToRemove: ["lasso2d", "select2d", "zoom2d", "resetScale2d"], displaylogo: false}}
layout= {{
xaxis: {
range: [State.values.xMin, State.values.xMax],
title: {
text: "The text I'm trying to change is here"
}
}
}}
/>
Where I want to update the plot: (StatisticField.js)
export default function StatisticsDropDown() {
return (
<Select onChange={(event) => {
State.values.PlotInfo.Fields = event.target.value
//console.log(document.getElementById("updater").innerHTML )
let e = {target: {value: ""}}
document.getElementById("min").value = 0
document.getElementById("max").value = 0
if(State.values.PlotInfo.Fields === "1"){
Plot.layout.title.text = State.values.PlotInfo.Fields + " mA"
}
else if(State.values.PlotInfo.Fields === "2"){
Plot.layout.title.text = State.values.PlotInfo.Fields + " dB"
}
else if(State.values.PlotInfo.Fields === "3"){
Plot.layout.title.text = State.values.PlotInfo.Fields + " dBm"
}
else if(State.values.PlotInfo.Fields === "4"){
Plot.layout.title.text = State.values.PlotInfo.Fields + " ps"
}
else if(State.values.PlotInfo.Fields === "5"){
Plot.layout.title.text = State.values.PlotInfo.Fields + " dBm"
}
else if(State.values.PlotInfo.Fields === "6"){
Plot.layout.title.text = State.values.PlotInfo.Fields + " dB"
}
else{
Plot.layout.title.text = "broken very sad"
}
window.testing.createPlot(e)
}}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</Select>
);
}
You need to use a state manager so that the component renders again when its value changes.
Capture the selected value StatisticsDropDown by using useState.
const [type, setType] = useState();
For the StatisticsDropDown component, update type value when values changes by:
<select onChange={(e)= setType(e.target.value)}>
<option value="mA">mA</option>
<option value="dB">dB</option>
</select>
Then, you can set Plot title dynamically reading type value.
<Plot
data={[]}
revision={this.state.revision}
config = {{displayModeBar: true, modeBarButtonsToRemove: ["lasso2d", "select2d", "zoom2d", "resetScale2d"], displaylogo: false}}
layout= {{
xaxis: {
range: [State.values.xMin, State.values.xMax],
title: {
text: type
}
}
}}
/>