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

user_8146556 0
Viewed 2323

I am using Plotly-Dash and need the font size of my text annotations to scale with the viewport width, as my graphs do. For various headers in my layout, I am able to directly set font-size: '1vw', however vw is not an accepted unit for setting the font-size for the style attribute of a dcc.Graph component. Here is the associated traceback:

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

I figure that if the dcc.Graph component can accept viewport units (e.g. style = {height: 30vw, width: 30vw}) and simply convert them to pixels browser-side, then I should be able to perform a similar conversion with the font-size.

Is there a means on the Python side to retrieve the viewport width in pixels, so that I can perform my own scaling logic for the font size?

Here is a sample Dash application that demonstrates this behavior:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

labels = {'Point 1': (3.5,5), 'Point 2': (1.5,2), 'Point 3': (3.5,8)}

app = dash.Dash(__name__)

app.layout = html.Div([

    html.H1('Test', id='test', style={'margin': 50}),

    dcc.Graph(id='my-plot', style={'margin': 10}),

])

@app.callback(
    Output('my-plot', 'figure'),
    [Input('test', 'children')])
def update_graph(val):

    return {

        'data': [go.Scatter(
            x=[v[0]],
            y=[v[1]],
            text=k,
            mode='text'
        ) for k, v in labels.items()],

        'layout': go.Layout(
            margin={'l': 40, 'b': 40, 't': 40, 'r': 40},
            shapes=[
                {
                    'type': 'path',
                    'path': ' M 1 1 L 1 3 L 4 1 Z',
                    'fillcolor': 'rgba(44, 160, 101, 0.5)',
                    'line': {
                        'color': 'rgb(44, 160, 101)',
                    }
                },
                {
                    'type': 'path',
                    'path': ' M 3,7 L2,8 L2,9 L3,10, L4,10 L5,9 L5,8 L4,7 Z',
                    'fillcolor': 'rgba(255, 140, 184, 0.5)',
                    'line': {
                        'color': 'rgb(255, 140, 184)',
                    }
                },
            ]
        )
    }

if __name__ == '__main__':
    app.run_server()
viewport-units plotly-dash plotly css python
2 Answers

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:

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;
}
user_74149390

The error message says you should mention the size as an int object. If you can't directly use vw in your code, try to get it using PySide / PyQt, and then convert it to int and save it under a different variable width & height that you can insert instead of vw.

from PySide import QtGui
#replace that with "from PyQt4 import QtGui" if you're using PyQt4

app = QtGui.QApplication([])
screen_resolution = app.desktop().screenGeometry()
width = int(screen_resolution.width())
height = int(screen_resolution.height())

I don't know what code you are working with so I haven't tried it out. Let me know if it works out for you.

user_108784930
Related