Suggest an edit to this page

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. Try Plotly Studio now.

Hiding the Legend 

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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n y: [0, 3, 6, 4, 5, 2, 3, 5, 4],\n type: 'scatter'\n};\nvar trace2 = {\n x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n y: [0, 4, 7, 8, 3, 6, 3, 3, 4],\n type: 'scatter'\n};\nvar data = [trace1, trace2];\nvar layout = {showlegend: false};\nPlotly.newPlot('myDiv', data, layout);\n"}">

Legend Names 

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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n y: [0, 3, 6, 4, 5, 2, 3, 5, 4],\n name: 'Blue Trace',\n type: 'scatter'\n};\nvar trace2 = {\n x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n y: [0, 4, 7, 8, 3, 6, 3, 3, 4],\n name: 'Orange Trace',\n type: 'scatter'\n};\nvar data = [trace1, trace2];\nPlotly.newPlot('myDiv', data);\n"}">

Positioning the Legend Inside the Plot 

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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n y: [0, 3, 6, 4, 5, 2, 3, 5, 4],\n type: 'scatter'\n};\nvar trace2 = {\n x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n y: [0, 4, 7, 8, 3, 6, 3, 3, 4],\n type: 'scatter'\n};\nvar data = [trace1, trace2];\nvar layout = {\n showlegend: true,\n legend: {\n x: 1,\n xanchor: 'right',\n y: 1\n }\n};\nPlotly.newPlot('myDiv', data, layout);\n"}">

Positioning the Legend Outside the Plot 

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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n y: [0, 3, 6, 4, 5, 2, 3, 5, 4],\n type: 'scatter'\n};\nvar trace2 = {\n x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n y: [0, 4, 7, 8, 3, 6, 3, 3, 4],\n type: 'scatter'\n};\nvar data = [trace1, trace2];\nvar layout = {\n showlegend: true,\n legend: {\n x: 1,\n y: 0.5\n }\n};\nPlotly.newPlot('myDiv', data, layout);\n"}">

Styling and Coloring the Legend 

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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n y: [0, 3, 6, 4, 5, 2, 3, 5, 4],\n type: 'scatter'\n};\nvar trace2 = {\n x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n y: [0, 4, 7, 8, 3, 6, 3, 3, 4],\n type: 'scatter'\n};\nvar data = [trace1, trace2];\nvar layout = {legend: {\n x: 0,\n y: 1,\n traceorder: 'normal',\n font: {\n family: 'sans-serif',\n size: 12,\n color: '#000'\n },\n bgcolor: '#E2E2E2',\n bordercolor: '#FFFFFF',\n borderwidth: 2\n }};\nPlotly.newPlot('myDiv', data, layout);\n"}">

Changing the orientation of Legend 

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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n y: [0, 3, 6, 4, 5, 2, 3, 5, 4],\n type: 'scatter'\n};\nvar trace2 = {\n x: [0, 1, 2, 3, 4, 5, 6, 7, 8],\n y: [0, 4, 7, 8, 3, 6, 3, 3, 4],\n type: 'scatter'\n};\nvar data = [trace1, trace2];\nvar layout = {showlegend: true,\n\tlegend: {\"orientation\": \"h\"}};\n \nPlotly.newPlot('myDiv', data, layout);\n"}">

Hiding Legend Entries 

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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [0, 1, 2],\n y: [1, 2, 3],\n name: 'First Trace',\n showlegend: false,\n type: 'scatter'\n};\nvar trace2 = {\n x: [0, 1, 2, 3],\n y: [8, 4, 2, 0],\n name: 'Second Trace',\n showlegend: true,\n type: 'scatter'\n};\nvar data = [trace1, trace2];\nPlotly.newPlot('myDiv', data);\n"}">

Grouped Legend 

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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [1, 2, 3],\n y: [2, 1, 3],\n legendgroup: 'group',\n marker: {color: 'rgb(164, 194, 244)'},\n mode: 'markers',\n name: 'first legend group',\n type: 'scatter'\n};\n\nvar trace2 = {\n x: [1, 2, 3],\n y: [2, 2, 2],\n legendgroup: 'group',\n line: {color: 'rgb(164, 194, 244)'},\n mode: 'lines',\n name: 'first legend group - average',\n type: 'scatter'\n};\n\nvar trace3 = {\n x: [1, 2, 3],\n y: [4, 9, 2],\n legendgroup: 'group2',\n marker: {color: 'rgb(142, 124, 195)'},\n mode: 'markers',\n name: 'second legend group',\n type: 'scatter'\n};\n\nvar trace4 = {\n x: [1, 2, 3],\n y: [5, 5, 5],\n legendgroup: 'group2',\n line: {color: 'rgb(142, 124, 195)'},\n mode: 'lines',\n name: 'second legend group - average',\n type: 'scatter'\n};\n\ndata = [trace1, trace2, trace3, trace4];\n\nPlotly.newPlot('myDiv', data);\n"}">

Subplot Grouped Legend 

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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: ['a'],\n y: [2],\n legendgroup: 'a',\n marker: {\n color: 'rgba(102,194,165,1)',\n line: {color: 'transparent'}\n },\n name: 'a',\n type: 'bar',\n xaxis: 'x',\n yaxis: 'y'\n};\n\nvar trace2 = {\n x: ['b'],\n y: [3],\n legendgroup: 'b',\n marker: {\n color: 'rgba(252,141,98,1)',\n line: {color: 'transparent'}\n },\n name: 'b',\n type: 'bar',\n xaxis: 'x',\n yaxis: 'y'\n};\n\nvar trace3 = {\n x: ['c'],\n y: [2],\n legendgroup: 'c',\n marker: {\n color: 'rgba(141,160,203,1)',\n line: {color: 'transparent'}\n },\n name: 'c',\n type: 'bar',\n xaxis: 'x',\n yaxis: 'y'\n};\n\nvar trace4 = {\n x: ['a'],\n y: [4],\n legendgroup: 'a',\n marker: {\n color: 'rgba(102,194,165,1)',\n line: {color: 'transparent'}\n },\n name: 'a',\n showlegend: false,\n type: 'bar',\n xaxis: 'x2',\n yaxis: 'y2'\n};\n\nvar trace5 = {\n x: ['b'],\n y: [2],\n legendgroup: 'b',\n marker: {\n color: 'rgba(252,141,98,1)',\n line: {color: 'transparent'}\n },\n name: 'b',\n showlegend: false,\n type: 'bar',\n xaxis: 'x2',\n yaxis: 'y2'\n};\n\nvar trace6 = {\n x: ['c'],\n y: [4],\n legendgroup: 'c',\n marker: {\n color: 'rgba(141,160,203,1)',\n line: {color: 'transparent'}\n },\n name: 'c',\n showlegend: false,\n type: 'bar',\n xaxis: 'x2',\n yaxis: 'y2'\n};\n\nvar data = [trace1, trace2, trace3, trace4, trace5, trace6];\n\nvar layout = {\n hovermode: 'closest',\n margin: {\n r: 10,\n t: 25,\n b: 40,\n l: 60\n },\n showlegend: true,\n xaxis: {\n anchor: 'y',\n categoryorder: 'array',\n domain: [0, 1],\n type: 'category',\n\t showgrid: false,\n\t showticklabels: false\n },\n xaxis2: {\n anchor: 'y2',\n categoryorder: 'array',\n domain: [0, 1],\n type: 'category',\n\t showgrid: false\n },\n yaxis: {\n anchor: 'x',\n domain: [0.52, 1],\n\t showgrid: false\n },\n yaxis2: {\n anchor: 'x2',\n domain: [0, 0.48],\n\t showgrid: false\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">