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.

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);
 Click to copy

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);
 Click to copy

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);
 Click to copy

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);
 Click to copy

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);
 Click to copy

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);
 Click to copy

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);
 Click to copy

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);
 Click to copy

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);
 Click to copy