DB2: Adjust label size

Dashboard
1

Hi!

I have a gauge and a bar chart next to each other. Both 2x4. Unfortunately the labels have different sizes.
My trials, even with the help of my best buddy, are all in vain.
I do not master the underlying technologies Node-RED ist supposed to shield me from.
What do I have to do (and how) to set the fontsize (an perphaps other properties) of a label of a chart/gauge?
I really, really wished this was easier in Node-RED, living up to the "low code" promise ...

Thanks in advance, Uwe

2

The chart node label looks to me about 12px, but that may well not be fixed.
As far as I know there is no easy way to influence the font size.

You can change the gauge label to 12px by giving the gauge a custom class of eg "twelvepx" and a CSS template to style it:

image
image899×707 29.3 KB

If 12px is not appropriate for your dashboard, the best bet is to blank out the label of both gauge and chart and add a text widget, which can be styled, above or below each widget.

That's a bit harsh.
You have managed to create a dashboard displaying a gauge and a chart, without a single line of HTML, Javascript or CSS.
How much "lower code" do you need?

I do agree though that there is not a very coherent Node-red dashboard style across different widgets, as evidenced by the different font sizes in gauge and chart widgets. It's better now than it first was. If you raise an issue on Github you might get the developers to normalise the label sizes.

3

Thanks for the template. I can now set the gauge title font-size.

I want to understand:
A nameless template node defines some ...twelvepx . The gauge refers to twelvepx, which, I think, automatically refers to the template's .nrdb-ui-gauge.twelvepx where label.nrdb-ui-gauge-title is set. Seems OK, so far.

Now I would like to set the chart title font-size.
And here the trouble begins again... Another template node is needed. Better use a different name: gauge refers to twelvepxchart. Do I have to have this with a different name? Why? Whatever ...

Just replacing gauge with chart does not work. Why? Best buddy throws in .v-card-title and tons of other stuff. Guided trial and error. Alas, to no avail.

Can you please point me to where I can find the "how". And perhaps help me out here ... Thanks in advance!

How am I supposed to know all this? There is a wide gap between me sitting front of Node-RED and ... this. No real HowTo, proper documentation how to achieve this.

I've been creating dashboards for years. I can basically do the same w/ DB2 as I did some 10 years ago with DB1. Sometimes less directly via Node-RED if new UI nodes are (still) less capable. Probably more, even everything if I jump into muddy waters of that swamp. But I want just solve my problems using a tool.

Honestly, today I expect more to be possible – with low code, easily, and, as you point out, coherently. I see a problem: Who will do the work? Who pays it?

Cheers, Uwe

4

I've learned what little I know about styling dashboards by using browser development tools to see the various IDs and Divs and experiment with styling them.
Best buddies, search engines and the forum are good places to pick up hints too.

.

Dashboard 2 is a product of FlowFuse, a commercial company, but the source code is open and anyone who feels competent can suggest enhancements.

In my opinion the chart node does far too much to screen the Node-red user from the background options.
It's possible that some future releases will expose more options to the widget config. You can wait and see, or else move away from the ui-chart node and look for examples of creating a chart in a ui-template.