Myujth

I have implemented a bar chart with rangeslider using react-plotly.js. I set initial range of the slider based on the input given in a date format. I have also implemented onClick event on barchart which would select a particular bar and change the color when I click on it.

In addition to that, I would also like to set the rangeslider to select the area where I have clicked the bar.
Currently, as you can see in the image above, the rangeslider sets itself back to the initial range value everytime the onClick event is performed. So in order to see the bar that was clicked, I have to manually move the slider to that area.

xaxis: 

 type: 'date',
 autorange: false,
 fixedrange: true, 
 showgrid: false,
 range: [moment.unix(this.state.startTime).format('YYYY-MM-DD'), moment.unix(this.state.endTime).format('YYYY-MM-DD')],
 rangeslider: 
 visible: true
 
 
<Plot
 data=this.prepData(this.state.chartData)
 onClick=(data) => 
 var colors = ;
 var clickedPoint = data.points[0].pointNumber;
 for (var i = 0; i < data.points[0].data.y.length; i++) 
 if (i === clickedPoint) 
 colors[i] = '#9b1e83';
 else 
 colors[i] = this.state.defaultColor[i];
 
 

 this.setState(
 currentColorsArray: colors,
 barClicked: data.points[0].pointNumber,
 showSummaryPanel: true
 ) 

 
 onHover=(hover) => this.getHoverInfo(hover)
 type='bar'
 />

How should I pass values to onRelayout such that it sets the rangeslider to the area where the onClick event was performed ?