Styling a line chart

Dashboard
,
1

Hello!
Please any idea on how I can change the font size of legend, x and y axes of a line chart. I’ve succeeded in changing the line thickness, but the legend and axes are not quite visible.

2

Please specify what ui node you are using and update the category/tags accordingly so that people can better respond. Thanks.

3

I used a chart ui node and function node which modifies the thickness of the lines as required.
image

4

If you copy the javascript in your function node and paste it here using the </> button

image

Then people can copy, test and adjust your code before advising you how to achieve your desired result.

Alternatively we could laboriously re-type the code shown in your picture before testing and adjusting it.
(Or of course, not)

5

Noted.
I've also tried this with the template node, but just the label section has appended to my chart,

<style>
    
     .chart>div>.label{
    font-size : 100px !important ;
   font-weight : bold !important ;
    text-color :#f9f9f9f9 !important;
            }
           .chart>div>.legend{
                background : #f9f9f9f9 !important;
                padding : 15px !important;
            }
            .chart>div>.legend>div>.item{
                font-size : 36px !important;
                color : gold !important;
            }
           .chart>div>.legend-item-symbol{
               background-radius : 0 !important;
            }
            .chart > div > .axes{
                font-size : 36px !important;
                color : purple !important;
            }
     </style>

For the line thickness, the function node handles that quite better:

msg.ui_control = {
    options: {
 elements: {
   line: {
borderWidth : 15,
fill : false
           }
        
            }
        }
    
}
return msg;

Below is the image of what I've achieved so far, the x and y elements are not quite visible and so does the legend.

image
image1563×582 77.4 KB

6

Thanks for the update.

I assume from your other posts that this is a Dashboard v2 chart (@flowfuse/node-red-dashboard) not Dashboard v1 (node-red-dashboard).

Your axis labels do seem to be too small.
Are you displaying the chart on a particularly high resolution screen?

I have tried and failed to style any part of the Dashboard v2 chart widget so I'm sorry I can't suggest anything useful.

The developers do read and respond to forum posts, maybe they will advise you.

7

Thank you