Page 1 of 1
Tiny graphs - Maximizing space
Posted: Thursday 21 July 2022 20:02
by hamster
I'm creating a series of small graphs to fit within a column. I have them working as intended but am trying to squeeze every extra pixel I can. I've attached a picture...is there a way to remove any/all of the green circled sections? The Y axis label isn't a huge deal since I sometimes will need it for other graphs, but there are blank sections on either end I'd like to use to stretch the graph a bit more on the X axis.
edit: second question: i know how to reduce the ticks on the X axis, but how do I make them horizontal instead of diagonal? Even when I reduce the amount and theres space in between, they stay diagonal.
Re: Tiny graphs - Maximizing space
Posted: Tuesday 23 August 2022 9:57
by nfuse
did you found a solution for this and if so can you share the code for this tiny graph? thanks in advance
Re: Tiny graphs - Maximizing space
Posted: Monday 19 September 2022 20:18
by Lokonli
You can use the undocumented 'options' parameter for a few things.
To remove the y-axis label, and to keep the x-axis tick marks horizontal, add the following:
Code: Select all
blocks['graph_2'] = {
options : {
scales: {
yAxes: [{
scaleLabel: {
display: false
}
}
],
xAxes: [{
ticks: {
maxRotation: 0
}
}
]
}
}
}
Re: Tiny graphs - Maximizing space
Posted: Tuesday 20 September 2022 9:18
by Lokonli
In addition, to maximize the space, you can also slightly scale the graph.
In custom.css add the following
Code: Select all
.dt_block[data-id='graph_2'] .graphcontent {
transform: scale(1.05,1.05)
}
Re: Tiny graphs - Maximizing space
Posted: Saturday 01 October 2022 23:38
by hamster
thanks for the reply!
nfuse wrote: ↑Tuesday 23 August 2022 9:57
did you found a solution for this and if so can you share the code for this tiny graph? thanks in advance
here's my final (just the relevant block)-
config.js:
Code: Select all
blocks['energygraph'] = {
devices: [370],
height: '125px',
width: 12,
datasetColors: ['white'],
maxTicksLimit: 12,
custom: {
"today": {
range: 'today',
data: {
Usage: 'd.v_370'
}
}
},
options : {
scales: {
yAxes: [{
scaleLabel: {
display: false
}
}
],
xAxes: [{
ticks: {
maxRotation: 0,
}
}
]
}
}
}
and custom.css:
Code: Select all
[data-id='energygraph'].graph .graphheader {
display: none;
}
.dt_block[data-id='energygraph'] .graphcontent {
transform: scale(1.06,1.20);
margin-left:15px
}