I want to use custom icon for the scatter markers. How to do it?

plotly.js
6

Hi, one very easy solution is to use UTF-8 icons. This will expand the ‘nomal’ plotly markers by a lot :slight_smile:
UTF-8 res: https://www.compart.com/de/unicode/search?q=bell#characters

Plotly.plot('graph', [{
  mode: 'text',
  x: [1],
  y: [1],
  text: ['⚽'],
  type: 'scatter',
  textfont: {
    size: 25,
    color: 'black'
  }
}])

You can easily exchange them. I havn’t found out yet, if using a custom created font also allows to use own icons.

I made a codepen for that: https://codepen.io/cherzog/pen/YzqBNvx?editors=0010

Hopefully this will help you!

4 Likes