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 = 16;
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 with wide trace name '+i,
    type: 'scatter',
    yaxis: (i%2==0) ? 'y1' : 'y2',
    visible: (i<plotOnlyFirstLines)? true : 'legendonly'
  });
  
  //modify offset
  offset+=1.1;
}

//define layout with legend configuration
var layout ={
	legend: {
				xanchor:"left",
				yanchor:"top",
				y:0,
				x:2,
				orientation: "h",
        bgcolor: 'rgb(200, 200, 200)',
        height: 20
	},
  xaxis: {title: 'X Axis'},
	yaxis: {title: 'Count#'},
  yaxis2:{
		title: 'Y-2Axis',
		overlaying: 'y',
		side: 'right'
	}
}


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