Plotly graph component cannot accept viewport units to set text annotation font size

From what I understood from looking around, there is not a way of doing this using only plotly-dash. What you need to achieve is essentially "responsive" typography, a topic which has some very interesting articles written about it:

• https://css-tricks.com/books/volume-i/scale-typography-screen-size/
• https://css-tricks.com/snippets/css/fluid-typography/
• font-sizing using em units: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Ems

Dash offers the option to override the default CSS and JS of an app and you can see from the layout documentation, how to use even external CSS files.

My suggestion: Research the resulting page to find how the text annotations get tagged (id and/or class) and use the methods provided in the articles above to create a satisfying result. (I am sorry that I cannot really do much more than suggesting, but I have not seen an example of your code :/)

---

EDIT (after comment and question editing):

So since the text annotations have the class textpoint we are going to override the default CSS:

1. Create the suggested folder structure:

   - app.py
   - assets/
   |--- typography.css
   

2. On the typography.css apply one of the methods mentioned above (I am going by the 2nd bulleted example):

   .textpoint{
       font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
   }
   

---

EDIT #2:

I found the problem and a workaround to it:

• The method to add custom CSS on Dash version >= 0.22 is indeed the above and it works.
• The element that we need to target in order to apply our custom rule to the annotations is a text tag inside the .textpoint class (CSS syntax: .textpoint text)
• For some reason, the custom CSS rule gets overridden (probably for a similar reason, explained on the top answer of this SO post: custom css being overridden by bootstrap css). So we need the "nuclear" option of !important.

Utilizing the above, the typography.css should look like this:

.textpoint text{
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
}