Chart label text not scaling correctly on mobile device

[colinl]

Current Behavior

The flow below correctly shows this in Edge on a PC with the window shrunk down to minimum size (dashboard v1.29.0)

Note that the label text is shown in full. On a phone, in portrait mode it shows as

In landscape mode it shows the full title.

Using dashboard v1.27 on the phone it showed the full text in both landscape and portrait. In portrait the font size is scaled down compared to the font size in landscape.

Whether there is anything we can do about this I don't know.

[{"id":"b29ff552a7bdcaf4","type":"ui-chart","z":"a17e320916ab3b9b","group":"4ecca468c23df954","name":"Монитор","label":"Мониторинг напряжения, потребления, потерь и частоты онлайн","order":1,"chartType":"bar","category":"seriesMon","categoryType":"property","xAxisLabel":"","xAxisProperty":"topic","xAxisPropertyType":"msg","xAxisType":"category","xAxisFormat":"dd.LL","xAxisFormatType":"custom","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"valuesMon","yAxisPropertyType":"property","ymin":"0","ymax":"600","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":"2","showLegend":true,"removeOlder":"5","removeOlderUnit":"604800","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":"5","className":"","interpolation":"smooth","x":240,"y":100,"wires":[[]]},{"id":"4ecca468c23df954","type":"ui-group","name":"Онлайн","page":"d8ffe29d78eeda2b","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d8ffe29d78eeda2b","type":"ui-page","name":"Мониторинг","ui":"ID-BASE-1","path":"/monitoring","icon":"home","layout":"grid","theme":"ec10442445c8ea89","breakpoints":[{"name":"Default","px":"0","cols":"6"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":12,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"ec10442445c8ea89","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"b057ae3935c443b3","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]

Expected Behavior

No response

Steps To Reproduce

No response

Environment

• Dashboard version:
• Node-RED version:
• Node.js version:
• npm version:
• Platform/OS:
• Browser:

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[teluse7]

Current Behavior

The flow below correctly shows this in Edge on a PC with the window shrunk down to minimum size (dashboard v1.29.0)

Note that the label text is shown in full. On a phone, in portrait mode it shows as In landscape mode it shows the full title.

Using dashboard v1.27 on the phone it showed the full text in both landscape and portrait. In portrait the font size is scaled down compared to the font size in landscape.

Whether there is anything we can do about this I don't know.

[{"id":"b29ff552a7bdcaf4","type":"ui-chart","z":"a17e320916ab3b9b","group":"4ecca468c23df954","name":"Монитор","label":"Мониторинг напряжения, потребления, потерь и частоты онлайн","order":1,"chartType":"bar","category":"seriesMon","categoryType":"property","xAxisLabel":"","xAxisProperty":"topic","xAxisPropertyType":"msg","xAxisType":"category","xAxisFormat":"dd.LL","xAxisFormatType":"custom","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"valuesMon","yAxisPropertyType":"property","ymin":"0","ymax":"600","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":"2","showLegend":true,"removeOlder":"5","removeOlderUnit":"604800","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":"5","className":"","interpolation":"smooth","x":240,"y":100,"wires":[[]]},{"id":"4ecca468c23df954","type":"ui-group","name":"Онлайн","page":"d8ffe29d78eeda2b","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d8ffe29d78eeda2b","type":"ui-page","name":"Мониторинг","ui":"ID-BASE-1","path":"/monitoring","icon":"home","layout":"grid","theme":"ec10442445c8ea89","breakpoints":[{"name":"Default","px":"0","cols":"6"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":12,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"ec10442445c8ea89","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"b057ae3935c443b3","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]

Expected Behavior

No response

Steps To Reproduce

No response

Environment

• Dashboard version:
• Node-RED version:
• Node.js version:
• npm version:
• Platform/OS:
• Browser:

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Hello. I experimented with New Line. This is what I got. But I should probably raise it a bit higher.