Request to add font.responsive in upcoming updates

[Saratoga]

Last week I was implementing line labels; When applying the color and size I had no problems but the bold and italics were not applied which seemed strange to me because in the documentation there are those properties for the font so I started to review the code to find a solution to the problem and I found the drawing.font function that is practically responsible for adding the font styles to various elements of the graphic but I saw that it only accepted the family, color and size parameters so I tried to modify it to add the weight and style properties but first I needed to do that the new properties will be saved in _fullLayout.shapes so I modified one or another function (fontAttrs, templatedArray, coerceFont) and I succeeded but when modifying the drawing.font function I don’t know what magic they do but it didn’t read the new properties I guess someone type of validation will do the wepack_require function, which is what I see used to import the modules; Today I started to review the code in the documentation and I saw that the drawing.font function was different and already included the weight and style properties and others, so I checked the version of Plotly that I had installed and the latest one available and I saw that it had 2.30.1 and the latest version is 2.33.0 (wow how fast they update, just 3 months ago I did an update) so I decided to update it even though then I had to add back all the modifications that I have made to it to plotly.js file; Once updated, the problem with bold and italics was resolved but what I didn’t say is that I was also trying to make the text responsive after having read another post where they requested it, at first I thought about passing the value of the responsive property which is stored in fullLayout._context to the drawing.font function but I would have to modify all the calls to this function in the file and there are many so that was not a good option, then I thought about adding a responsive property to the font that way one could choose which elements you want the font size to adapt to and finally change the next line of the drawing.font function

if (size + 1) s.style('font-size', size + 'px');

for this

if (size + 1) s.style('font-size', size + (responsive ? 'vw' : 'px'));

but as I already said, I don’t know why it doesn’t read the property (it doesn’t mark an error)

I hope that in the next versions they can add this change since perhaps in the future I will need my app to also work on mobile phones.

[AIMPED]

Maybe you could create a feature request on github?

Issues · plotly/plotly.js

[Saratoga]

I couldn’t leave this unfinished so if you don’t want to wait for it to be implemented in future versions, make the following changes to have responsive text in some Plotly elements, these changes are made in version 2.33, I have only tested it in shapes and annotations

First you have to add the new font.responsive property to Layer._fullLayout, the first step is to modify the fontAttrs function for that you have to look for module 25376

We go down a little and there between the style and variant properties we add the responsive property as in the image

Now we look for the coerceFont function found in module 63064

We go down again until we find the coerceFont function and add the highlighted line in the image

Finally we modify the drawing.font property of the marked line

And ready we have responsive text, In this example the red label and the line label change their size