Charts ok in all browers, but not chrome on a PC

[paul_c]

Hi, I have an app that works fine in chrome and safari on mobile devices, and on firefox and safari on a PC. However, while on chrome on a PC the charts appear, the chart titles and x axis labels/titles don’t display properly. Would anyone know why?

Screenshots are attached, the first from chrome, the second from firefox. Or the app is at www.eastasiaecon.com, shown at the bottom of the home page.

Thank you

[paul_c]

It seems the problem stems from the lines that specify text size. If I exclude those from my theme file as shown here, then in chrome on a PC the charts show with titles and x labels as they should.

This isn’t an ideal solution, as I was using dynamic sizing for the text so the charts and labelling could be viewed on different devices.

Is this a problem anyone else has come across? Thanks.

attrs:
    Axis:
        axis_label_text_font: 'Georgia'
        major_label_text_font: 'Georgia'
#        axis_label_text_font_size: '0.8vw'
#        major_label_text_font_size: '0.6vw'
    Yaxis:
        formatter: NumeralTickFormatter(format="0,0.0")
    Xaxis:
        formatter: DatetimeTickFormatter(months="%b %Y")
    Title:
        text_font_style: 'bold'
        text_font : 'Georgia'
#        text_font_size : '1.1vw'
    Legend:
        label_text_font: 'Georgia'
        label_text_font_size: '0.9vw'
        padding: 1
        spacing: 1
        background_fill_alpha: 0.7

[Bryan]

@paul_c Browsers provide APIs for measuring text metrics, but inexpiclably, these do not include text height. So everyone has to resort to hacky ad-hoc ways to determine text height, e.g. rendering a sample string to an off-screen canvas and counting pixels. We certainly exercise all the common cases on Chrome but I guess the usual methods for manually measuring text height don’t function Chrome (or at least, some versions of Chrome but not others, which is also entirely possible) with this “vw” unit. I’d encourage you to submit a GitHub Issue with details, but am not sure we will be able to do much more than document this as a browser incompatibility.

[paul_c]

Hi Bryan, thanks for the explanation. I’ll submit a GitHub Issue

[paul_c]

It was suggested to me that I use ‘rem’ for sizing rather than ‘vw’, and that seems to have solved the problem.