Don't want to change background color at the time of dragging

plotly.js
1

When I dragging plotly area graph that time I want to fill area with our choice color which dragging by mouse. I don’t want background color which is coming by default at the time of dragging. I referred this code.

When I dragging graph that time graph is coming like this:

dragged.png1360×623 9.77 KB

I want apposite to above image.

Here, when I dragging graph by mouse that time dragged area filling by gray color and remain area of graph is filling by some light color. I don’t want like this.

When I will drag graph by mouse that time I want to fill area by color which dragged by mouse and don’t want fill remain area of graph by any color.

Hope, you will understand my problem.

My code is:

    <script>
	var trace1 = {
	x: ['2013-10-04 22:23:00', '2016-10-06 22:23:00',  '2013-11-04 22:23:00', '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'],
    y: [1, 3, 6,9, 4, 5],
	  fill: 'tozeroy',
	  fillcolor: 'red',
	  text: server1,
	  hoverinfo: "x+y+text",
	  name:"Server 1",
	  type: 'scatter',
	  mode:"markers",
	  marker:
	  {
		size:5,
		color:"gray"
	  },
	  uid:"c2e171"
	};
	var layout = {
	  margin: {
		l: 20,
		r: 40,
		b: 40,
		t: 10
	  },
	  legend: {
		"orientation": "h"
	  },
	  yaxis : {fixedrange: true},
	};
	var data = [trace1];
	Plotly.newPlot('myDiv', data,layout);
	
	var plotDiv = document.getElementById('myDiv');
	plotDiv.on('plotly_relayout',
    function(eventdata){  
        alert( 'ZOOM!' + '\n\n' +
            'Event data:' + '\n' + 
             JSON.stringify(eventdata) + '\n\n' +
            'x-axis start:' + new Date(eventdata['xaxis.range[0]'])+ '\n' +
            'x-axis end:' + new Date(eventdata['xaxis.range[1]']));
			var xVal = new Date(eventdata['xaxis.range[0]']);
			var yVal = new Date(eventdata['xaxis.range[1]']);
    });
    </script>
2

Hi, did you find any solutio for this?