JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

JavaScript

//some configs
var offset = 1.1;
var countOfLines = 15;
var plotOnlyFirstLines = 3;
//create 15 lines
traces=[];
for(i =0; i<countOfLines; i++){
	traces.push({
  	x: [1, 2, 3],
    y: [40*offset, 80*offset, 120*offset], 
    name: 'trace'+i,
    type: 'scatter',
    yaxis: (i%2==0) ? 'y1' : 'y2',
    visible: (i<plotOnlyFirstLines)? true : 'legendonly'
  });
  
  //modify offset
  offset+=1.1;
}

//selector options for range slider
var selectorOptions = {
		buttons: [{
			step: 'month',
			stepmode: 'backward',
			count: 1,
			label: '1m'
		}, {
			step: 'month',
			stepmode: 'backward',
			count: 6,
			label: '6m'
		}, {
			step: 'year',
			stepmode: 'todate',
			count: 1,
			label: 'YTD'
		}, {
			step: 'year',
			stepmode: 'backward',
			count: 1,
			label: '1y'
		}, {
			step: 'all',
		}],
	};
  
//define layout with legend configuration
var layout ={
	legend: {
				xanchor:"left",//"auto" | "left" | "center" | "right"
				yanchor:"top",//"auto" | "top" | "middle" | "bottom"
				y:2,//number between or equal to -2 and 3
				x:-1,//number between or equal to -2 and 3
				orientation: "v"
	},
  xaxis: {rangeselector: selectorOptions,
					rangeslider: {}
	},
	yaxis: {title: 'Count#'},
	yaxis2:{
		title: 'Y-2Axis',
		overlaying: 'y',
		side: 'right'
	}
}


Plotly.newPlot("myDiv",traces,layout);