Font size on the x and y axis of the charts

Dashboard
1

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.

2

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}]
3

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

4

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)

5

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;
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.