Black Lives Matter. Please consider donating to Black Girls Code today.

Online chart has different formatting

I made a bar chart in Jupyter Notebook using Python and it works fine. However, when I look at the chart online, the formatting is different (hover text is there, font is different, etc).
Here’s my code: (not sure how to make code look right on here, but obviously the indentation is wrong)
data = [go.Bar(x = scores,
y = phrases,
orientation = ‘h’,
text = bar_text,
textposition = ‘inside’,
insidetextfont = dict(
size = 30,
color = ‘white’
),
opacity =.7,
marker = dict(
color =’#E41B17’,
line = dict(
color =’#000000’,
width = 1),
),
)]
layout = dict(
width = 600,
font = dict(family = ‘PT Sans Narrow’),
yaxis = dict(
showgrid = False,
showticklabels = False
),
xaxis=dict(title=’% Likelihood Phrase in Right Headlines’)
)

fig = go.Figure(data=data, layout=layout)
py.iplot(fig, filename='right_headlines')

And here it is online:
https://plot.ly/~VanessaVanG/15/

What’s also strange is the font is correct in the preview box on my files page.

Hi @vkshiro,

Do you think it could be an issue with sizing? When I visit the link, here’s the figure I see:

If I zoom into 200% (or resize the browser to much smaller), here’s what I get:

.

It looks to me like this is the correct font, but perhaps it’s a little bolder than the image you’re showing.

-Jon

That’s odd–when I visit it, and when I resize the window, the font is still serif font–not the sans serif (which is what it should be) that you see. (I do understand that when it’s a large chart, the font size looks smaller inside the bars but the font should be sans serif!)

Here’s the screenshot from online:

I’ve viewed this in Chrome and Edge with the same results.

Hmm, I’m not really sure how to diagnose font issues like this. Have you experimented with other fonts? Do any of them show up for you online?
-Jon