| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: max-age=600
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Wed, 30 Jul 2025 23:36:03 GMT
etag: W/"687e6266-e660"
expires: Wed, 30 Jul 2025 23:46:02 GMT
last-modified: Mon, 21 Jul 2025 15:53:10 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: MISS
x-cache-hits: 0
x-fastly-request-id: d75a475dbb22d6c5a3a4b193ed7f8674ac452d82
x-github-request-id: 1840:18991D:9ED3:F08A:688AAC62
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210024-BOM
x-timer: S1753918563.878716,VS0,VE210
x-vercel-cache: MISS
x-vercel-id: bom1::7fbhb-1753918562861-2afee6fb399e
content-length: 9968
Legends in JavaScript
Legends in JavaScript
How to modify the legend in D3.js-based javascript graphs. Seven examples of how to move, color, and hide the legend.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {showlegend: false};
Plotly.newPlot('myDiv', data, layout);
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
name: 'Blue Trace',
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
name: 'Orange Trace',
type: 'scatter'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
showlegend: true,
legend: {
x: 1,
xanchor: 'right',
y: 1
}
};
Plotly.newPlot('myDiv', data, layout);
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
showlegend: true,
legend: {
x: 1,
y: 0.5
}
};
Plotly.newPlot('myDiv', data, layout);
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {legend: {
x: 0,
y: 1,
traceorder: 'normal',
font: {
family: 'sans-serif',
size: 12,
color: '#000'
},
bgcolor: '#E2E2E2',
bordercolor: '#FFFFFF',
borderwidth: 2
}};
Plotly.newPlot('myDiv', data, layout);
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {showlegend: true,
legend: {"orientation": "h"}};
Plotly.newPlot('myDiv', data, layout);
var trace1 = {
x: [0, 1, 2],
y: [1, 2, 3],
name: 'First Trace',
showlegend: false,
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3],
y: [8, 4, 2, 0],
name: 'Second Trace',
showlegend: true,
type: 'scatter'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);
var trace1 = {
x: [1, 2, 3],
y: [2, 1, 3],
legendgroup: 'group',
marker: {color: 'rgb(164, 194, 244)'},
mode: 'markers',
name: 'first legend group',
type: 'scatter'
};
var trace2 = {
x: [1, 2, 3],
y: [2, 2, 2],
legendgroup: 'group',
line: {color: 'rgb(164, 194, 244)'},
mode: 'lines',
name: 'first legend group - average',
type: 'scatter'
};
var trace3 = {
x: [1, 2, 3],
y: [4, 9, 2],
legendgroup: 'group2',
marker: {color: 'rgb(142, 124, 195)'},
mode: 'markers',
name: 'second legend group',
type: 'scatter'
};
var trace4 = {
x: [1, 2, 3],
y: [5, 5, 5],
legendgroup: 'group2',
line: {color: 'rgb(142, 124, 195)'},
mode: 'lines',
name: 'second legend group - average',
type: 'scatter'
};
data = [trace1, trace2, trace3, trace4];
Plotly.newPlot('myDiv', data);
var trace1 = {
x: ['a'],
y: [2],
legendgroup: 'a',
marker: {
color: 'rgba(102,194,165,1)',
line: {color: 'transparent'}
},
name: 'a',
type: 'bar',
xaxis: 'x',
yaxis: 'y'
};
var trace2 = {
x: ['b'],
y: [3],
legendgroup: 'b',
marker: {
color: 'rgba(252,141,98,1)',
line: {color: 'transparent'}
},
name: 'b',
type: 'bar',
xaxis: 'x',
yaxis: 'y'
};
var trace3 = {
x: ['c'],
y: [2],
legendgroup: 'c',
marker: {
color: 'rgba(141,160,203,1)',
line: {color: 'transparent'}
},
name: 'c',
type: 'bar',
xaxis: 'x',
yaxis: 'y'
};
var trace4 = {
x: ['a'],
y: [4],
legendgroup: 'a',
marker: {
color: 'rgba(102,194,165,1)',
line: {color: 'transparent'}
},
name: 'a',
showlegend: false,
type: 'bar',
xaxis: 'x2',
yaxis: 'y2'
};
var trace5 = {
x: ['b'],
y: [2],
legendgroup: 'b',
marker: {
color: 'rgba(252,141,98,1)',
line: {color: 'transparent'}
},
name: 'b',
showlegend: false,
type: 'bar',
xaxis: 'x2',
yaxis: 'y2'
};
var trace6 = {
x: ['c'],
y: [4],
legendgroup: 'c',
marker: {
color: 'rgba(141,160,203,1)',
line: {color: 'transparent'}
},
name: 'c',
showlegend: false,
type: 'bar',
xaxis: 'x2',
yaxis: 'y2'
};
var data = [trace1, trace2, trace3, trace4, trace5, trace6];
var layout = {
hovermode: 'closest',
margin: {
r: 10,
t: 25,
b: 40,
l: 60
},
showlegend: true,
xaxis: {
anchor: 'y',
categoryorder: 'array',
domain: [0, 1],
type: 'category',
showgrid: false,
showticklabels: false
},
xaxis2: {
anchor: 'y2',
categoryorder: 'array',
domain: [0, 1],
type: 'category',
showgrid: false
},
yaxis: {
anchor: 'x',
domain: [0.52, 1],
showgrid: false
},
yaxis2: {
anchor: 'x2',
domain: [0, 0.48],
showgrid: false
}
};
Plotly.newPlot('myDiv', data, layout);