Axis Font Size on Barchart

Dashboard
1

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:

<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

<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

2

The answer will take the same path as this thread Values color - gauge

3

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.

{"_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

4

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.

5

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

[{"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}]
1 Like
6

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

7

you can install from master

cd ~/.node-red && npm i node-red/node-red-dashboard
8

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?