# Font size on the x and y axis of the charts

**URL:** <https://discourse.nodered.org/t/font-size-on-the-x-and-y-axis-of-the-charts/35261>\
**Category:** Dashboard\
**Created:** [3 November 2020 07:51 UTC](https://discourse.nodered.org/t/font-size-on-the-x-and-y-axis-of-the-charts/35261 "2020-11-03T07:51:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manfred53](https://avatars.discourse-cdn.com/v4/letter/m/7feea3/32.png) [@Manfred53](https://discourse.nodered.org/u/Manfred53)\
**Post date:** [3 November 2020 07:51 UTC](https://discourse.nodered.org/t/font-size-on-the-x-and-y-axis-of-the-charts/35261/1 "2020-11-03T07:51:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 November 2020 17:16 UTC](https://discourse.nodered.org/t/font-size-on-the-x-and-y-axis-of-the-charts/35261/2 "2020-11-03T17:16:11Z")

</div>

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

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Manfred53](https://avatars.discourse-cdn.com/v4/letter/m/7feea3/32.png) [@Manfred53](https://discourse.nodered.org/u/Manfred53)\
**Post date:** [3 November 2020 17:50 UTC](https://discourse.nodered.org/t/font-size-on-the-x-and-y-axis-of-the-charts/35261/3 "2020-11-03T17:50:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Manfred53](https://avatars.discourse-cdn.com/v4/letter/m/7feea3/32.png) [@Manfred53](https://discourse.nodered.org/u/Manfred53)\
**Post date:** [4 November 2020 11:58 UTC](https://discourse.nodered.org/t/font-size-on-the-x-and-y-axis-of-the-charts/35261/4 "2020-11-04T11:58:20Z")

</div>

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](https://discourse.nodered.org/uploads/short-url/fLA0Yf1DGRuKL8IuRjUbFn9Gt5c.txt) (9.2 KB)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [4 November 2020 12:53 UTC](https://discourse.nodered.org/t/font-size-on-the-x-and-y-axis-of-the-charts/35261/5 "2020-11-04T12:53:42Z")

</div>

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

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 December 2020 12:53 UTC](https://discourse.nodered.org/t/font-size-on-the-x-and-y-axis-of-the-charts/35261/6 "2020-12-04T12:53:42Z")

</div>

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