Dashticz - latest beta - Howto change font-size x-axis and legend graph Topic is solved

[Maikel76]

Goodday,
Really loving the new graph possibilities. Finetuned a lot of stuff
Now I would like to change font-size of the x-axis and also the font of the legend underneath. I have a rather small and full ipad so efficient use of space is priority
this is my CONFiG.js

Code: Select all

blocks['my_graph'] = {
       title: 'Avg temp',
        devices: [13, 95, 97, 99, 98],
        graph: 'line',
        graphTypes: ['l','l','te','te','te'],
        lineTension: 0.4,
        width: 8,
        height: '125px',
            legend: {
                te_13:"now",
                te_95:"avg",
                te_97:"set",
                l_99:"din",
                l_98:"AC on"
                },
        lineFill: [false,false,false, true, true],
        datasetColors: ['grey','red','orange','green','rgba(44,130,201,0.5)'],
        debug: false
}

this is my custom.css

Code: Select all

.dt_block[data-id='my_graph'] {                     /* graph temp*/
     padding-top: 0px !important;
     padding-bottom: 0px !important;  
}
.graphheader,
.graphbuttons {
  display: none;
}

The "font-size: 9px;" with or without !important doest effect x-axis and legend
Also, is there an option to change the large rectangular blocks for small square ones?
this is how the legend looks now;

graph2.jpg (333.31 KiB) Viewed 921 times

[Creo2005]

What theme?

[Maikel76]

What theme?

in CONFIG.js it says;

Code: Select all

config['theme'] = 'default';

[Lokonli]

Goodday,
Really loving the new graph possibilities. Finetuned a lot of stuff
Now I would like to change font-size of the x-axis and also the font of the legend underneath. I have a rather small and full ipad so efficient use of space is priority
this is my CONFiG.js

Code: Select all

blocks['my_graph'] = {
       title: 'Avg temp',
        devices: [13, 95, 97, 99, 98],
        graph: 'line',
        graphTypes: ['l','l','te','te','te'],
        lineTension: 0.4,
        width: 8,
        height: '125px',
            legend: {
                te_13:"now",
                te_95:"avg",
                te_97:"set",
                l_99:"din",
                l_98:"AC on"
                },
        lineFill: [false,false,false, true, true],
        datasetColors: ['grey','red','orange','green','rgba(44,130,201,0.5)'],
        debug: false
}

this is my custom.css

Code: Select all

.dt_block[data-id='my_graph'] {                     /* graph temp*/
     padding-top: 0px !important;
     padding-bottom: 0px !important;  
}
.graphheader,
.graphbuttons {
  display: none;
}

The "font-size: 9px;" with or without !important doest effect x-axis and legend
Also, is there an option to change the large rectangular blocks for small square ones?
this is how the legend looks now;
graph2.jpg

The graph elements are no normal HTML elements, but drawn on a canvas by the Chartjs module. That means they can be styled via custom.css.

But, since the goal of Dashticz is to maximize customization options, also for the graphs there is a possibility. However, it's a bit more complex, so only suitable for advanced usage.

While doing some tests, I noticed it was not possible anymore to customize the Y-axes. In the mean time I've fixed that in the latest beta.

Assuming you are running latest beta, you can customize the the font size of x and Y axes and the width of the graph legend via the 'options' block parameter as follows:

Code: Select all

    options: {
        scales: {
            xAxes: [{
                   ticks: {
                    fontSize: 7
                   }
            }],
            yAxes: [{
                ticks: {
                 fontSize: 7,
                },
                scaleLabel: {
                    fontSize: 7
                }
                
            }],
        },
        legend:{
            labels:{
                fontSize:10,
                boxWidth:10
            },
        }
    }

If you are testing, I would advice to first literally copy the code above into your graph block definition. After that you can start adjusting the parameters.

Enjoy.

[Maikel76]

Goodday,
Really loving the new graph possibilities. Finetuned a lot of stuff
Now I would like to change font-size of the x-axis and also the font of the legend underneath. I have a rather small and full ipad so efficient use of space is priority
this is my CONFiG.js

Code: Select all

blocks['my_graph'] = {
       title: 'Avg temp',
        devices: [13, 95, 97, 99, 98],
        graph: 'line',
        graphTypes: ['l','l','te','te','te'],
        lineTension: 0.4,
        width: 8,
        height: '125px',
            legend: {
                te_13:"now",
                te_95:"avg",
                te_97:"set",
                l_99:"din",
                l_98:"AC on"
                },
        lineFill: [false,false,false, true, true],
        datasetColors: ['grey','red','orange','green','rgba(44,130,201,0.5)'],
        debug: false
}

this is my custom.css

Code: Select all

.dt_block[data-id='my_graph'] {                     /* graph temp*/
     padding-top: 0px !important;
     padding-bottom: 0px !important;  
}
.graphheader,
.graphbuttons {
  display: none;
}

The "font-size: 9px;" with or without !important doest effect x-axis and legend
Also, is there an option to change the large rectangular blocks for small square ones?
this is how the legend looks now;
graph2.jpg

The graph elements are no normal HTML elements, but drawn on a canvas by the Chartjs module. That means they can be styled via custom.css.

But, since the goal of Dashticz is to maximize customization options, also for the graphs there is a possibility. However, it's a bit more complex, so only suitable for advanced usage.

While doing some tests, I noticed it was not possible anymore to customize the Y-axes. In the mean time I've fixed that in the latest beta.

Assuming you are running latest beta, you can customize the the font size of x and Y axes and the width of the graph legend via the 'options' block parameter as follows:

Code: Select all

    options: {
        scales: {
            xAxes: [{
                   ticks: {
                    fontSize: 7
                   }
            }],
            yAxes: [{
                ticks: {
                 fontSize: 7,
                },
                scaleLabel: {
                    fontSize: 7
                }
                
            }],
        },
        legend:{
            labels:{
                fontSize:10,
                boxWidth:10
            },
        }
    }

If you are testing, I would advice to first literally copy the code above into your graph block definition. After that you can start adjusting the parameters.

Enjoy.

Hi Lokonli,
Thanks for the extra information, really apreciate that you make these kind of options available through CONFIG.js since that is probably more futureproof than through css (although it's great that option is also available)
It's working like a charm and exactly as I wished, many thanks!

Could ask if it's also possible to add the following graph-type in the graphs module or is it better to make a new topic?
The domoticz device is a Mikrotik Router (https://github.com/mrin/domoticz-routeros-plugin) with value for axis-label Mbit/s. Upstream and downstream are seperate devices
This is the JSON data for device idx 100 (upstream in Mbit/s, downstream is idx 101 also in Mbit/s)

Code: Select all

http://ip:port/json.htm?type=devices&rid=100

Code: Select all

{
	"ActTime" : 1642160390,
	"AstrTwilightEnd" : "19:23",
	"AstrTwilightStart" : "05:30",
	"CivTwilightEnd" : "18:31",
	"CivTwilightStart" : "06:22",
	"DayLength" : "11:23",
	"NautTwilightEnd" : "18:57",
	"NautTwilightStart" : "05:56",
	"ServerTime" : "2022-01-14 18:39:50",
	"SunAtSouth" : "12:27",
	"Sunrise" : "06:45",
	"Sunset" : "18:08",
	"app_version" : "2021.1",
	"result" : 
	[
		{
			"AddjMulti" : 1.0,
			"AddjMulti2" : 1.0,
			"AddjValue" : 0.0,
			"AddjValue2" : 0.0,
			"BatteryLevel" : 255,
			"CustomImage" : 106,
			"Data" : "0.07 Mbit/s",
			"Description" : "",
			"Favorite" : 0,
			"HardwareDisabled" : false,
			"HardwareID" : 9,
			"HardwareName" : "MikroTik",
			"HardwareType" : "Mikrotik RouterOS",
			"HardwareTypeVal" : 94,
			"HaveTimeout" : false,
			"ID" : "00090001",
			"Image" : "mikrotik-routeros-winbox",
			"LastUpdate" : "2022-01-14 18:39:23",
			"Name" : "MikroTik - Bandwidth UP",
			"Notifications" : "false",
			"PlanID" : "0",
			"PlanIDs" : 
			[
				0
			],
			"Protected" : false,
			"SensorType" : 1,
			"SensorUnit" : "Mbit/s",
			"ShowNotifications" : true,
			"SignalLevel" : "-",
			"SubType" : "Custom Sensor",
			"Timers" : "false",
			"Type" : "General",
			"TypeImg" : "mikrotik-routeros-winbox",
			"Unit" : 1,
			"Used" : 1,
			"XOffset" : "0",
			"YOffset" : "0",
			"idx" : "100"
		}
	],
	"status" : "OK",
	"title" : "Devices"
}

Thanks again for all your effort

[Lokonli]

Could ask if it's also possible to add the following graph-type in the graphs module or is it better to make a new topic?

Yes, please create a new topic, and I'll answer it there.

[Maikel76]

Could ask if it's also possible to add the following graph-type in the graphs module or is it better to make a new topic?

Yes, please create a new topic, and I'll answer it there.

Ok thanks, will do that now