FontAwesome Unicode in Plotly JS Scatterplot

plotly.js
1

I’m back on the war path of trying to find a way to get Font Awesome icons to show up in a javascript plotly scatterplot. I originally abandoned the idea and pursued using an image of the icon (here: Plotly Scatterplot Image. However, my biggest issue with that solution is that the image size is scaled to the x-axis. This means the size of the image is different depending on your zoom level. Instead, I would like it to be the same size regardless of x-axis range or zoom level.

I have reason to believe using FA unicode text is possible. I found this Python solution: Pictograms with Plotly and Font Awesome. Code below:

import pandas as pd
import plotly
import plotly.graph_objs as go
plotly.offline.init_notebook_mode()

title = 'Team scores'

ds = pd.Series({'Alpha' : 67, 'Bravo' : 30, 'Charlie' : 20, 'Delta': 12, 'Echo': 23, 'Foxtrot': 56})


Xlim = 16
Ylim = 13
Xpos = 0
Ypos = 12 ##change to zero for upwards
series = []
for name, count in ds.iteritems():
x = []
y = []
for j in range(0, count):
if Xpos == Xlim:
Xpos = 0
Ypos -= 1
x.append(Xpos)
y.append(Ypos)
Xpos += 1
trace = go.Scatter(x=x,
y=y,
mode="text",
text='\uf11b',
textposition="middle center",
textfont={"family": "FontAwesome",
"size": 18,
},
name=f'{name} ({count})',
hovertemplate=f'{name} ({count})',
)
series.append(trace)

fig = go.Figure(dict(data=series, layout=go.Layout(
title={'text': title, 'x': 0.5, 'xanchor': 'center'},
paper_bgcolor='rgba(255,255,255,1)',
plot_bgcolor='rgba(0,0,0,0)',
xaxis=dict(showgrid=False,zeroline= False, showline=False, visible=False, showticklabels=False),
yaxis=dict(showgrid=False,zeroline= False, showline=False, visible=False, showticklabels=False),
)))
fig.show()

I’d like to do the same. My environment is a react app, and not having luck. I imported css and webfonts folders into my assets and imported css into the test page:

import "assets/css/fontawesome.min.css";

Note - not using fontawesome-react as the method will not be creating a component. I’ll need the webfonts and css.

Trying to copy the Python approach, a trace is added to the plot that is mode='text'. Also, I checked the css file, and font-family is defined as "Font Awesome Pro 6". Here is my attempt:

  let trace = {
    x: noteDates,
    y: new Array(noteDates.length).fill(1),
    mode: "text",
    hovertemplate: "Date: %{x}<extra></extra>",
    text: "\uf11b",
    textposition: "middle-center",
    textfont: {
      family: "Font Awesome 6 Pro",
      size: 20,
      weight: 900,
    },
    name: "Note",
    yaxis: "y2",
    showlegend: false,
  };

Unfortunately, this does not work. But, i have reason for hope again from the Python example - they seemingly had success. Also, I found the method to work somewhat, if it is not Font Awesome unicode. For instance, if I alter the code to this:

  let trace = {
    x: noteDates,
    y: new Array(noteDates.length).fill(1),
    mode: "text",
    //hoverinfo: "none",
    hovertemplate: "Date: %{x}<extra></extra>",
    text: "&#x1f4c4;",
    textposition: "middle-center",
    textfont: {
      size: 20,
      weight: 900,
    },
    name: "Note",
    yaxis: "y2",
    showlegend: false,
  };

… then I do see the character. Here is a list of icon type standard? unicode hex characters: Unicode Characters List. Many of them do work. Certainly, perhaps with some settings adjustments? the Font Awesome characters can work?

For testing / reference, here is a list of Font Awesome unicode characters from v5: Font Awesome Cheatsheet

Thanks for any help!

2

Two small things make this work.

  1. Importing the correct css file (all.min.css rather than fontawesome.min.css)
  2. Use family: "FontAwesome"

It seems many, but not all work. Could be related to #2 above. Would be nice to have access to sharp, duotone, etc. They appear to render bold and maybe lack some clarity. I actually think the regular unicode emoji’s might look the best for the way I’m using them. And doesn’t require importing more code.

At any rate- hope it helps someone, and would be interested to see if anyone gets any of the others working (thin, sharp, duotone) and better luck with clarity.

1 Like