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.
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
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.
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.
