Horizontal Legends in JavaScript

How to make a D3.js-based horizontal legend plot in JavaScript.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Basic Example

var trace1 = {
		x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
		y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
		type: 'scatter',
		name:'Plot 1'
        };
var trace2 = {
	    x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
	    y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
	    type: 'scatter',
	    name:'Plot 2'
        };
var trace3 = {
	    x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
	    y: [0, 5, 3, 10, 5.33, 2.24, 4.4, 5.1, 7.2],
	    type: 'scatter',
	    name:'Plot 3'
        };

var data = [trace1, trace2, trace3];
var layout = {
		showlegend: true,
		legend: {"orientation": "h"}
	    };
 
Plotly.newPlot('myDiv', data, layout);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var trace1 = {\n\t\tx: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n\t\ty: [0, 3, 6, 4, 5, 2, 3, 5, 4],\n\t\ttype: 'scatter',\n\t\tname:'Plot 1'\n };\nvar trace2 = {\n\t x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n\t y: [0, 4, 7, 8, 3, 6, 3, 3, 4],\n\t type: 'scatter',\n\t name:'Plot 2'\n };\nvar trace3 = {\n\t x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n\t y: [0, 5, 3, 10, 5.33, 2.24, 4.4, 5.1, 7.2],\n\t type: 'scatter',\n\t name:'Plot 3'\n };\n\nvar data = [trace1, trace2, trace3];\nvar layout = {\n\t\tshowlegend: true,\n\t\tlegend: {\"orientation\": \"h\"}\n\t };\n \nPlotly.newPlot('myDiv', data, layout);"}">