Many thanks!
Looks very interesting now:
And this is how it looked originally:
It would be perfekt without the 3D-Effect and with Time-Labels shown on the X-Axis.
My Function Node now looks like this:
[{"id":"d76c0c57.362018","type":"function","z":"427fc89b.e34038","name":"","func":"msg.ui_control = {\n options: {\n scales: {\n yAxes: [{\n ticks: {\n display: false,\n min : 0,\n max : 1,\n stepSize : 1\n }\n }],\n xAxes: [{\n type: 'time',\n time: {\n unit: 'minute'\n }\n }]\n },\n legend: {\n display: false\n }\n }\n};\nreturn msg;","outputs":1,"noerr":0,"x":650,"y":100,"wires":[["5b86851d.3816b4"]]}]
Explore and do experiments in this area https://www.chartjs.org/docs/latest/axes/cartesian/time.html
Along the xAxes you can adjust many things to properly distribute values.
Many thanks again. I have done some experiments and got now a good configuration:
msg.ui_control = {
options: {
scales: {
yAxes: [{
ticks: {
display: false,
min : -0.01,
max : 1.05,
stepSize : 1
}
}],
xAxes: [{
type: 'time',
time: {
displayFormats: {
millisecond: 'HH:mm',
second: 'HH:mm',
minute: 'HH:mm',
hour: 'HH:mm'
}
},
ticks: {
display: true,
fontSize: 11,
fontColor: '#000',
maxRotation: 0
},
gridLines: {
display: true,
drawBorder : false,
drawOnChartArea: true,
drawTicks: true,
tickMarkLength: 5
}
}]
},
legend: {
display: false
}
}
};
return msg;
2 Likes
Hi!
Sorry for digging out this old thread, but I'm interested in customising my chart. I followed the suggestions here but I'm stuck. Maybe an image first:
Depending on the multistate switch I display the data. But I want to adjust the x-axis labels depending on the time interval. For the case in the image I'd like to have tick labels every 10 minutes. I tried:
{
"options": {
"scales": {
"xAxes": [
{
"type": "time",
"time": {
"displayFormats": {
"millisecond": "HH:mm",
"second": "HH:mm",
"minute": "HH:mm",
"hour": "HH",
"day": "MMM D"
},
"unit": "minute",
"stepSize": 10
},
"ticks": {
"display": true,
"fontSize": 11,
"maxRotation": 50
},
"gridLines": {
"display": false,
"drawBorder": false,
"drawOnChartArea": true,
"drawTicks": true,
"tickMarkLength": 5
}
}
]
},
"legend": {
"display": true
}
}
}
How do I tell the chart to show me tick labels every 10 minutes? I thought that
"stepSize": 10
was the option I needed, but it doesn't have an effect. Even if I use 1 or 1000. There must be something I didn't quite understand in the docs, can somebody give me a hint please? Thanks in advance!
You can't adjust the time gap between the ticks. But you can tell how many ticks is allowed to create.
Mostly it can be fixed value cos the layout size of chart is not changing. But can be changed if data requires so.
"ticks": {
"autoSkip": true,
"maxTicksLimit": 6
},
2 Likes
Thank you very much!
BTW, I didn't find this option in the documentation in Cartesian Ā· Chart.js documentation but now found it in Linear Ā· Chart.js documentation. It seems I'm sometimes overwhelmed with reading the docs if I don't know the right keyword I need 
For me it took just to read the docs with no intention to solve some immediate problem. But hey, who the hell has time to do that 
If a day had 30-40 hours, that would be great. Then I had - besides working and family - some time to sleep 
One reason why "stepSize" sounded good to me was the idea to have an equidistant spacing. Now it looks like
That's not as nice as an equidistant spacing but I can live with it. So thanks again! 
Just to finalize my problem: the config inside the xAxes[0] object needs to be
type: 'time',
time: {
displayFormats: {
minute: 'HH:mm',
hour: 'HH',
day: 'MMM D'
},
unit: 'minute',
unitStepSize: 10,
},
This way an equidistant spacing is possible (on the second image "unitStepSize: 15," was used) (Found on https://stackoverflow.com/a/37083312)
2 Likes
Bravo 
You should also adjust the tick colors and gridline colors cos whenever you change the scales thy fall back to library default which is some dark gray and fits only for light themes.
There is many examples shared here where you can what is needed to adjust ...
