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

plotly.js
1

Hello,

I need to use icon for the marker. How can i do it? Or even customize it with some kind of canvas or etc?

1 Like
2

scatter traces don’t allow that at the moment. You’ll need to use layout.shapes.

3

Is it still not possible to add icons as markers ? I want to add icons(.png format) instead of dots in scatterplot using plotly.js.

1 Like
4

I would like to do the exact same thing! Have you figured out how to do that? Perhaps some hacky solution?

5

One hacky solution is to add layout images as suggested by @etienne (please see https://plot.ly/javascript/images/). You won’t have hover for them but you can have a scatter trace with invisible points for the hover and then the layout images as icons.

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