✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
📊 Dash 2.0 is Arriving. Register here.

Font-size for dcc.Graph annotations do not accept viewport units

Currently I can set a header such as html.H1('Test', style={'font-size': '2vw'}), etc. to scale with the viewport width. However, when I attempt to do the same with a dcc.Graph annotation, I receive the following error:

ValueError: Invalid element(s) received for the ‘size’ property of scatter.textfont Invalid elements include: [‘1vw’, ‘1vw’, ‘1vw’, ‘1vw’, ‘1vw’, ‘1vw’, ‘1vw’, ‘1vw’, ‘1vw’, ‘1vw’]

The 'size' property is a number and may be specified as:
  - An int or float in the interval [1, inf]
  - A tuple, list, or one-dimensional numpy array of the above

Is there a plan to implement viewport units as a valid option? Or is there a current acceptable work-around for this implementation? When I scale my viewport down to half my screen (width-wise), my text annotations tend to dominate my graphs, which is not desirable.

Looking to get some more visibility to this question. Here is the associated question on SO: https://stackoverflow.com/q/53951814/8146556

There isn’t a plan on supporting this right now. Feel free to create an issue in the official plotly.js github though: https://github.com/plotly/plotly.js/issues

Thanks for the reply @chriddyp. I will go ahead and open up an issue.

Are their any acceptable workarounds for this that you are aware of? Resizing the window tends to result in the text annotations dominating the graph itself…

To start, make the margins of your graph really small, that way your chart isn’t dominated bymargin space on smaller screens.

Other than that, there aren’t any other workarounds if you have several annotations. Might be cool if we had a Viewport component that could render different components depending on the width of the screen

That’s what I’ve done :confused:

The margins are near zero, and the axis are actually turned off. I am recreating specially-designed charts using SVG paths as inputs to the shape attribute of the layout.

I just find it interesting that I can set the font-size to scale with viewport units for a dcc.Dropdown component by modifying the style of the parent Div, but the dcc.Graph components do not function in the same manner with text annotations.

Appreciate your time thus far on this topic!

It might have to do with how the SVG is rendered in plotly.js, or perhaps there are some pixel units that are being hardcoded. I’m not too familiar with the underlying plotly.js font code, so I’d recommend making an issue and discussing with the enginers on that project. There might be a simple fix or a deeper reason why this is difficult.

1 Like

I’ve opened an issue with plotly.js github: https://github.com/plotly/plotly.js/issues/3420