# Axis Font Size on Barchart

**URL:** <https://discourse.nodered.org/t/axis-font-size-on-barchart/8722>\
**Category:** Dashboard\
**Created:** [7 March 2019 19:54 UTC](https://discourse.nodered.org/t/axis-font-size-on-barchart/8722 "2019-03-07T19:54:06Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![JonG98](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jong98/32/6539_2.png) [@JonG98](https://discourse.nodered.org/u/JonG98)\
**Post date:** [7 March 2019 19:54 UTC](https://discourse.nodered.org/t/axis-font-size-on-barchart/8722/1 "2019-03-07T19:54:06Z")

</div>

I have attempted to search but I can not seem to find the field for style sheet to change the font on the x and y axis for the legends.

I attempted to examine the Elements but it appears to use a canvas element to make the chart:

```auto
<canvas ng-if="me.item.look==='bar'" 
class="chart chart-bar ng-scope ng-isolate-scope" 
chart-data="config.data" 
chart-series="config.series" 
chart-labels="config.labels" 
chart-options="config.options" 
chart-colors="config.colours" height="383" width="1370" style="display: block; width: 1713px; height: 479px;"> </canvas>

```

I found where to change the title of the chart

```auto
<style>
.nr-dashboard-theme .nr-dashboard-chart-titlel { font-size: xx-large;
  font-weight: 500 !important;
    }
</style>

```

I am just at a loss of where to change the text size of the axis options.

Kind Regards,  
Jon

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 March 2019 23:25 UTC](https://discourse.nodered.org/t/axis-font-size-on-barchart/8722/2 "2019-03-07T23:25:27Z")

</div>

The answer will take the same path as this thread [Values color - gauge](https://discourse.nodered.org/t/values-color-gauge/8633)

---

<div class="post-metadata">

**Author:** ![JonG98](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jong98/32/6539_2.png) [@JonG98](https://discourse.nodered.org/u/JonG98)\
**Post date:** [8 March 2019 02:10 UTC](https://discourse.nodered.org/t/axis-font-size-on-barchart/8722/3 "2019-03-08T02:10:40Z")

</div>

I really appreciate the help.

I can not see the fields that would be applicable in that document to label/ value font size. I tried injecting the following into my node : "ui\_control":{"options":{"labelMinFontSize":100}}} without any luck.

```auto
{"_msgid":"44c47855.798568","topic":"","payload":{"labels":["Length","Perp"],"data":[[100,25]],"series":[["x"]]},"ui_control":{"options":{"labelMinFontSize":100}}}

```

I tried to use this but it was from gauge documentation and not the chart documentation. Could you point me to the chart documentation with options.

Kind Regards,  
Jon

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 March 2019 10:50 UTC](https://discourse.nodered.org/t/axis-font-size-on-barchart/8722/4 "2019-03-08T10:50:32Z")

</div>

Apologies (was late at night) - I mixed up gauge and chart in my head.  
I'm sure there will be an option , but I don't think we currently expose it.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 March 2019 11:38 UTC](https://discourse.nodered.org/t/axis-font-size-on-barchart/8722/5 "2019-03-08T11:38:48Z")

</div>

Have added the ability to override many more of the chartjs options to master branch (not yet on npm).

So this should now work... when sent to a chart widget

```auto
[{"id":"b7667d24.e8999","type":"function","z":"f86be7c2.1183b8","name":"","func":"\nmsg.ui_control = { options: {\n scales: {\n yAxes: [\n {\n display: true,\n ticks: {\n fontSize: msg.payload,\n fontColor: \"red\"\n }\n }\n]\n }\n}\n}\nmsg.payload = 10;\nmsg.topic = \"test\";\nreturn msg;","outputs":1,"noerr":0,"x":730,"y":440,"wires":[["1ca3d373.1d0d4d"]]},{"id":"4edff357.f0102c","type":"ui_button","z":"f86be7c2.1183b8","name":"","group":"81133bb4.a310a8","order":1,"width":0,"height":0,"passthru":false,"label":"font 8","tooltip":"","color":"","bgcolor":"","icon":"fa-building-o","payload":"8","payloadType":"num","topic":"","x":570,"y":440,"wires":[["b7667d24.e8999"]]},{"id":"f2767e11.7f7ff","type":"ui_button","z":"f86be7c2.1183b8","name":"","group":"81133bb4.a310a8","order":1,"width":0,"height":0,"passthru":false,"label":"font 40","tooltip":"","color":"","bgcolor":"","icon":"fa-building-o","payload":"40","payloadType":"num","topic":"","x":580,"y":480,"wires":[["b7667d24.e8999"]]},{"id":"81133bb4.a310a8","type":"ui_group","name":"Group 1","tab":"c079e407.819378","order":1,"disp":true,"width":6},{"id":"c079e407.819378","type":"ui_tab","name":"Tab 2","icon":"dashboard","order":2}]

```

---

<div class="post-metadata">

**Author:** ![JonG98](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jong98/32/6539_2.png) [@JonG98](https://discourse.nodered.org/u/JonG98)\
**Post date:** [8 March 2019 20:18 UTC](https://discourse.nodered.org/t/axis-font-size-on-barchart/8722/6 "2019-03-08T20:18:24Z")

</div>

When will this make it to npm? I do not want to show my ignorance on how to install from github. I tried just copying into the the chart.js file but that did not work.

Kind Regards,  
Jon

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 March 2019 21:13 UTC](https://discourse.nodered.org/t/axis-font-size-on-barchart/8722/7 "2019-03-08T21:13:28Z")

</div>

you can install from master

```auto
cd ~/.node-red && npm i node-red/node-red-dashboard

```

---

<div class="post-metadata">

**Author:** ![idt1201](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/idt1201/32/6911_2.png) [@idt1201](https://discourse.nodered.org/u/idt1201)\
**Post date:** [14 March 2019 10:14 UTC](https://discourse.nodered.org/t/axis-font-size-on-barchart/8722/8 "2019-03-14T10:14:17Z")

</div>

> [@dceejay](#):
>
> cd ~/.node-red && npm i node-red/node-red-dashboard

Hi, I did the upgrade to 2.14.1 and tried out your example, but there was no change to the font size, any ideas?