Font size on the x and y axis of the charts

Hi there! Does anyone know how I can reduce the font size on the axes of the charts? At the Label I can do it f.e. with < font size =2 > "label-name", but not at the axes.

It is possible. But doing so, you'll lose most of chart area configuration so you'll need to make almost full config for chart scales.

Here's an example

[{"id":"54e43731.190018","type":"ui_chart","z":"9038de34.04db3","name":"","group":"855d3e6d.56036","order":2,"width":"6","height":"4","label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"15","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":770,"y":640,"wires":[[]]},{"id":"9cf2e8ab.4b90a8","type":"inject","z":"9038de34.04db3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":290,"y":640,"wires":[["b6abb8fd.c35ad8"]]},{"id":"b6abb8fd.c35ad8","type":"random","z":"9038de34.04db3","name":"","low":"1","high":"10","inte":"true","property":"payload","x":460,"y":640,"wires":[["54e43731.190018"]]},{"id":"e226076f.875368","type":"inject","z":"9038de34.04db3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":330,"y":700,"wires":[["edd03776.55c0c8"]]},{"id":"edd03776.55c0c8","type":"function","z":"9038de34.04db3","name":"Chart config","func":"msg.ui_control = {\n    options: {\n        scales: {\n            \n            yAxes: [{\n                gridLines:{\n                    color:'#99999933',\n                    zeroLineColor:'#99999933',\n                    tickMarkLength:5\n                },\n                ticks: {\n                   fontSize:10,\n                   lineHeight:1\n                }\n            }],\n             xAxes: [{\n               type:'time',\n                time: {\n                    distribution: 'series',\n                    \n                },\n                 gridLines:{\n                    color:'#99999933',\n                    zeroLineColor:'#99999933',\n                    tickMarkLength:5\n                },\n                \n                ticks: {\n                   fontSize:10,\n                   lineHeight:1\n                }\n            }],\n           \n        }\n    }\n}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":550,"y":700,"wires":[["54e43731.190018"]]},{"id":"3b767ba6.26aa24","type":"inject","z":"9038de34.04db3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":560,"y":600,"wires":[["54e43731.190018"]]},{"id":"26a37dae.9c02e2","type":"comment","z":"9038de34.04db3","name":"Chart config docs","info":"https://www.chartjs.org/docs/latest/charts/line.html","x":450,"y":760,"wires":[]},{"id":"855d3e6d.56036","type":"ui_group","z":"","name":"DEFAULT","tab":"7179c13.0628d4","order":2,"disp":true,"width":"6","collapse":false},{"id":"7179c13.0628d4","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Thank you very much. A little bit complicated, but it works.

Here is still a problem with formatting the font. I inserted the example from hotNipi in my flow, but made some modifications regarding the font (size, color and family). But the following problems remain:

  • Font family Arial doesn't work
  • There is a decimal point used on the y-axis that I cannot remove
  • The range of the y-axis is not adjustable, I need 22...29 and 10...15 (the chart area configuration doesn't work anymore)
  • The time format at the x-axis is 12h with am and pm I need 24h format with hh:mm

The application is a voltage monitoring of 6 batteries on a vessel. To display it on a mobile phone I have reduced the size of the gauges and the charts. I have the test flow with the gauges where the example of hotNipi is integrated attached flow.txt (9.2 KB)

Well, I adjusted couple of things for you but it all is in docs. Read carefully an do experiments.

msg.ui_control = {
    options: {
        scales: {
            
            yAxes: [{
                gridLines:{
                    color:'#99999933',
                    zeroLineColor:'#99999933',
                    tickMarkLength:5
                },
                ticks: {
                    fontFamily:"'Arial'",
                   fontStyle:'normal',
                   fontSize:7,
                   fontColor:'#ffffffff',
                   lineHeight:1,
                   precision:0,
                   stepSize:3,
                   suggestedMin: 22,
                   suggestedMax: 29
                }
            }],
             xAxes: [{
               type:'time',
                time: {
                    distribution: 'series',
                    displayFormats: {
                        minute: 'HH:mm',
                        hour: 'HH:mm'
                    }
                    
                },
                 gridLines:{
                    color:'#99999933',
                    zeroLineColor:'#99999933',
                    tickMarkLength:5
                },
                
                ticks: {
                   fontFamily:"'Arial'",
                   fontStyle:'normal',
                   fontSize:7,
                   fontColor:'#ffffffff',
                   lineHeight:1,
                   source:'data',
                   maxRotation:25
                  
                }
            }],
           
        }
    }
}
delete msg.payload
return msg;