Plotly.js: Allow viewport units for `font.size`?

[RickAhlf]

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.

Here is the associated SO question I've posted: https://stackoverflow.com/q/53951814/8146556
Here is the associated Plotly-Dash forum question I've posted: https://community.plot.ly/t/font-size-for-dcc-graph-annotations-do-not-accept-viewport-units/17423?u=rahlf23

[antoinerg]

I think a very useful unit for font.size would be relative to the size of the figure itself. The SVG way of achieving this is to add a viewBox attribute to the svg element and let the renderer scale everything on resizing. Unfortunately, as discussed in issue https://github.com/plotly/plotly.js/issues/2711, this won't be easy to do and will break various things. I think we will have to compute ourselves the absolute values of font size based on the current size of the figure.

viewBox in action: https://codepen.io/antoinerg/pen/Ezpdmz

[dougleville]

Would agree with @antoinerg and just add my vote as this is currently the most difficult thing about working with Plotly for me. I have a requirement to be able to resize Plotly within a div, so viewport units will not work for my case and font that scales to the actual size of the plot would be awesome.

Right now I'm working around this by listening to the div resize event and manually rescaling the font, but it's pretty inefficient because it requires a lot of rerendering of an expensive element.

[joshrabinowitz]

I had to implement this in javascript too, both for font sizes and for line widths.
It would be great if plotly js supported scaling/resizing line widths and font sizes dynamically as the viewport resized.

[myaleks]

hi joshrabinowitz
could you please elaborate how do you do this (scaling/resizing line widths and font sizes dynamically as the viewport resized)