Styling Markers in JavaScript

How to style markers in JavaScript.

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

Add Marker Border

In order to make markers distinct, you can add a border to the markers. This can be achieved by adding the line dict to the marker dict. For example, marker:{..., line: {...}}.

var x = Array.from({length: 500}, () => Math.random()*(6-3)+3);
var y = Array.from({length: 500}, () => Math.random()*(6-3)+3);

var data = [{
  x: x,
  y: y,
  type: 'scatter',
  mode: 'markers',
  marker: {
    color: 'rgb(17, 157, 255)',
    size: 20,
    line: {
      color: 'rgb(231, 99, 250)',
      width: 2
    }
  },
  showlegend: false
  }, {
  x: [2],
  y: [4.5],
  type: 'scatter',
  mode: 'markers',
  marker: {
    color: 'rgb(17, 157, 255)',
    size: 60,
    line: {
      color: 'rgb(231, 99, 250)',
      width: 6
    }
  },
  showlegend: false
}]

Plotly.newPlot('myDiv', data)

Fully Opaque

Fully opaque, the default setting, is useful for non-overlapping markers. When many points overlap it can be hard to observe density.

var x = Array.from({length: 500}, () => Math.random()*(6-3)+3);
var y = Array.from({length: 500}, () => Math.random()*(6-3)+3);

var data = [{
  x: x,
  y: y,
  type: 'scatter',
  mode: 'markers',
  marker: {
    color: 'rgb(17, 157, 255)',
    size: 20,
    line: {
      color: 'rgb(231, 99, 250)',
      width: 2
    }
  },
  showlegend: false
  }, {
  x: [2,2],
  y: [4.25,4.75],
  type: 'scatter',
  mode: 'markers',
  marker: {
    color: 'rgb(17, 157, 255)',
    size: 60,
    line: {
      color: 'rgb(231, 99, 250)',
      width: 6
    }
  },
  showlegend: false
}]

Plotly.newPlot('myDiv', data)

Trace Opacity

Setting opacity outside the marker will set the opacity of the trace. Thus, it will allow greater visbility of additional traces but like fully opaque it is hard to distinguish density.

var x = Array.from({length: 500}, () => Math.random()*(6-3)+3);
var y = Array.from({length: 500}, () => Math.random()*(4.5-3)+3);
var x2 = Array.from({length: 500}, () => Math.random()*(6-3)+3);
var y2 = Array.from({length: 500}, () => Math.random()*(6-4.5)+4.5);

var data = [{
  x: x,
  y: y,
  type: 'scatter',
  mode: 'markers',
  opacity: 0.5,
  marker: {
    color: 'rgb(17, 157, 255)',
    size: 20,
    line: {
      color: 'rgb(231, 99, 250)',
      width: 2
    }
  },
  name: 'Opacity 0.5'
  }, {
  x: x2,
  y: y2,
  type: 'scatter',
  mode: 'markers',
  marker: {
    color: 'rgb(17, 157, 255)',
    size: 20,
    line: {
      color: 'rgb(231, 99, 250)',
      width: 2
    }
  },
  name: 'Opacity 1.0'
  }, {
  x: [2,2],
  y: [4.25,4.75],
  type: 'scatter',
  mode: 'markers',
  opacity: 0.5,
  marker: {
    color: 'rgb(17, 157, 255)',
    size: 60,
    line: {
      color: 'rgb(231, 99, 250)',
      width: 6
    }
  },
  showlegend: false
}]

Plotly.newPlot('myDiv', data)

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var x = Array.from({length: 500}, () => Math.random()*(6-3)+3);\nvar y = Array.from({length: 500}, () => Math.random()*(4.5-3)+3);\nvar x2 = Array.from({length: 500}, () => Math.random()*(6-3)+3);\nvar y2 = Array.from({length: 500}, () => Math.random()*(6-4.5)+4.5);\n\nvar data = [{\n x: x,\n y: y,\n type: 'scatter',\n mode: 'markers',\n opacity: 0.5,\n marker: {\n color: 'rgb(17, 157, 255)',\n size: 20,\n line: {\n color: 'rgb(231, 99, 250)',\n width: 2\n }\n },\n name: 'Opacity 0.5'\n }, {\n x: x2,\n y: y2,\n type: 'scatter',\n mode: 'markers',\n marker: {\n color: 'rgb(17, 157, 255)',\n size: 20,\n line: {\n color: 'rgb(231, 99, 250)',\n width: 2\n }\n },\n name: 'Opacity 1.0'\n }, {\n x: [2,2],\n y: [4.25,4.75],\n type: 'scatter',\n mode: 'markers',\n opacity: 0.5,\n marker: {\n color: 'rgb(17, 157, 255)',\n size: 60,\n line: {\n color: 'rgb(231, 99, 250)',\n width: 6\n }\n },\n showlegend: false\n}]\n\nPlotly.newPlot('myDiv', data)\n"}">

Marker Opacity

To maximise visibility of density, it is recommended to set the opacity inside the marker marker:{opacity:0.5}. If multiple traces exist with high density, consider using marker opacity in conjunction with trace opacity.

var x = Array.from({length: 500}, () => Math.random()*(6-3)+3);
var y = Array.from({length: 500}, () => Math.random()*(6-3)+3);

var data = [{
  x: x,
  y: y,
  type: 'scatter',
  mode: 'markers',
  marker: {
    color: 'rgb(17, 157, 255)',
    opacity: 0.5,
    size: 20,
    line: {
      color: 'rgb(231, 99, 250)',
      width: 2
    }
  },
  showlegend: false
  }, {
  x: [2,2],
  y: [4.25,4.75],
  type: 'scatter',
  mode: 'markers',
  marker: {
    color: 'rgb(17, 157, 255)',
    opacity: 0.5,
    size: 60,
    line: {
      color: 'rgb(231, 99, 250)',
      width: 6
    }
  },
  showlegend: false
}]

Plotly.newPlot('myDiv', data)

Color Opacity

To maximise visibility of each point, set the color opacity by using alpha: marker:{color: 'rgba(0,0,0,0.5)'}. Here, the marker line will remain opaque.

var x = Array.from({length: 500}, () => Math.random()*(6-3)+3);
var y = Array.from({length: 500}, () => Math.random()*(6-3)+3);

var data = [{
  x: x,
  y: y,
  type: 'scatter',
  mode: 'markers',
  marker: {
    color: 'rgba(17, 157, 255,0.5)',
    size: 20,
    line: {
      color: 'rgb(231, 99, 250)',
      width: 2
    }
  },
  showlegend: false
  }, {
  x: [2,2],
  y: [4.25,4.75],
  type: 'scatter',
  mode: 'markers',
  marker: {
    color: 'rgba(17, 157, 255,0.5)',
    size: 60,
    line: {
      color: 'rgb(231, 99, 250)',
      width: 6
    }
  },
  showlegend: false
}]

Plotly.newPlot('myDiv', data)