If you’re working on this, @pierre-gilles, would it maybe be possible to also improve the way the min and max y-values and the step between two y-values are chosen? Because I quite often have charts like this:
Everything can be improved @StephaneB 
What’s the problem with these graphs?
From what I understand (and from my point of view as well) he would like to be able to configure the min/max values of the graphs to have the same visualization (the scale of the outside temperature is smaller than the others, so it gives the impression of large outdoor fluctuations when that’s not the case.
I had the same thought for certain graphs (power, for example); the curves often serve to give us a quick overview. And there, without looking at the values, you get the impression of a big difference.
1 Like
Being able to set the min/max might be a solution.
But in any case this is what bothers me about the charts I shared, and I’ll take the second as an example: the y-axis values shown are 18.43, 19.05, 19.67, 20.29. I find that makes the chart less readable. It would be better if the values were ‹ round ›: 18.5, 19, 19.5, 20. Or even 18, 19, 20, 21.
2 Likes
Ok I understand!
In my opinion there are other solutions before adding another layer of settings Especially since in this case it’s impossible to know in advance what temperatures will be like, so putting fixed values would make little sense. It’s better that it’s dynamic, but smarter.
In ApexCharts (the library we use), there are plenty of options.
We could add a « minimum margin » for example between the lowest value and the highest value
There are options to adjust the step as well.
All the options are available here: Options (Reference) > yaxis – ApexCharts.js
We should play with the options to see how it looks
1 Like
Yes, I agree that we should try to improve without adding new settings.
I can think of something that would automatically calculate the correct values for the minimum y, the maximum y and the step, but can I assume that you can easily extract the min and max of all the data that will be displayed in the graph?
1 Like
Yes, very easily It’s just an array of values!
1 Like
ok. So I would do this:
we know minVal and maxVal = minimum/maximum of the displayed values
we look for minOrd and maxOrd = minimum/maximum of the chart’s y-axis values
f = 10 ^ floor(log10(abs(maxVal-minVal)))
minOrd = floor(minVal / f) * f
maxOrd = ceil(maxVal / f) * f
And I don’t know if we then need to constrain the step… With min and max being neat, the rendering by ApexCharts will already be improved.
If we want to « force » the step, we can compute a theoretical step p1 = (maxOrd-minOrd)/f, then map it to determine the step to impose p2, and avoid having too large a step in some cases:
(But we have to test the rendering when the step is 3.5 or 4.5…)
1 Like
This can be tested!
Could you copy-paste an API response that’s causing a problem so I can compare the before/after on a specific case?
Open the inspector on Gladys locally (right click → inspect element), then:
Give me the JSON here
(Yes, I’m working in the office, I need to open the window — the CO2 is pretty high in here haha)
Voilà un json et le graphe correspondant
{
"0": {
"device": {
"name": "Capteur Netatmo Entrée"
},
"deviceFeature": {
"name": "Temperature - Salon"
},
"values": [
{
"created_at": "2025-01-16T19:49:50.387Z",
"value": 19.2
},
{
"created_at": "2025-01-16T19:55:50.395Z",
"value": 19.2
},
{
"created_at": "2025-01-16T20:01:50.373Z",
"value": 19.166666666666668
},
{
"created_at": "2025-01-16T20:07:50.419Z",
"value": 19.1
},
{
"created_at": "2025-01-16T20:13:50.388Z",
"value": 19.033333333333335
},
{
"created_at": "2025-01-16T20:19:50.353Z",
"value": 19
},
{
"created_at": "2025-01-16T20:25:50.331Z",
"value": 19
},
{
"created_at": "2025-01-16T20:31:50.293Z",
"value": 19
},
{
"created_at": "2025-01-16T20:37:50.331Z",
"value": 19
},
{
"created_at": "2025-01-16T20:43:50.357Z",
"value": 19
},
{
"created_at": "2025-01-16T20:49:50.509Z",
"value": 19
},
{
"created_at": "2025-01-16T20:55:50.309Z",
"value": 19
},
{
"created_at": "2025-01-16T21:01:50.309Z",
"value": 18.966666666666665
},
{
"created_at": "2025-01-16T21:07:50.812Z",
"value": 18.9
},
{
"created_at": "2025-01-16T21:13:50.380Z",
"value": 18.9
},
{
"created_at": "2025-01-16T21:19:53.738Z",
"value": 18.9
},
{
"created_at": "2025-01-16T21:25:50.399Z",
"value": 18.9
},
{
"created_at": "2025-01-16T21:31:50.379Z",
"value": 18.9
},
{
"created_at": "2025-01-16T21:37:50.442Z",
"value": 18.9
},
{
"created_at": "2025-01-16T21:43:50.316Z",
"value": 18.9
},
{
"created_at": "2025-01-16T21:49:50.380Z",
"value": 18.9
},
{
"created_at": "2025-01-16T21:55:53.661Z",
"value": 18.9
},
{
"created_at": "2025-01-16T22:01:50.391Z",
"value": 18.933333333333334
},
{
"created_at": "2025-01-16T22:07:53.350Z",
"value": 19
},
{
"created_at": "2025-01-16T22:13:50.428Z",
"value": 19
},
{
"created_at": "2025-01-16T22:19:50.458Z",
"value": 19
},
{
"created_at": "2025-01-16T22:25:50.440Z",
"value": 19.1
},
{
"created_at": "2025-01-16T22:31:50.426Z",
"value": 19.1
},
{
"created_at": "2025-01-16T22:37:50.443Z",
"value": 19.1
},
{
"created_at": "2025-01-16T22:43:53.234Z",
"value": 19.166666666666668
},
{
"created_at": "2025-01-16T22:49:50.439Z",
"value": 19.2
},
{
"created_at": "2025-01-16T22:55:50.434Z",
"value": 19.3
},
{
"created_at": "2025-01-16T23:01:50.432Z",
"value": 19.3
},
{
"created_at": "2025-01-16T23:07:50.395Z",
"value": 19.3
},
{
"created_at": "2025-01-16T23:13:50.434Z",
"value": 19.333333333333332
},
{
"created_at": "2025-01-16T23:19:51.050Z",
"value": 19.4
},
{
"created_at": "2025-01-16T23:25:50.467Z",
"value": 19.4
},
{
"created_at": "2025-01-16T23:31:50.466Z",
"value": 19.4
},
{
"created_at": "2025-01-16T23:37:50.557Z",
"value": 19.4
},
{
"created_at": "2025-01-16T23:43:50.484Z",
"value": 19.4
},
{
"created_at": "2025-01-16T23:49:50.489Z",
"value": 19.4
},
{
"created_at": "2025-01-16T23:55:50.516Z",
"value": 19.4
},
{
"created_at": "2025-01-17T00:01:50.503Z",
"value": 19.4
},
{
"created_at": "2025-01-17T00:07:50.960Z",
"value": 19.4
},
{
"created_at": "2025-01-17T00:13:50.542Z",
"value": 19.4
},
{
"created_at": "2025-01-17T00:19:50.500Z",
"value": 19.4
},
{
"created_at": "2025-01-17T00:25:50.515Z",
"value": 19.333333333333332
},
{
"created_at": "2025-01-17T00:31:50.515Z",
"value": 19.3
},
{
"created_at": "2025-01-17T00:37:50.559Z",
"value": 19.3
},
{
"created_at": "2025-01-17T00:43:50.537Z",
"value": 19.3
},
{
"created_at": "2025-01-17T00:49:50.561Z",
"value": 19.3
},
{
"created_at": "2025-01-17T00:55:50.537Z",
"value": 19.3
},
{
"created_at": "2025-01-17T01:01:50.473Z",
"value": 19.3
},
{
"created_at": "2025-01-17T01:07:50.519Z",
"value": 19.3
},
{
"created_at": "2025-01-17T01:13:50.476Z",
"value": 19.266666666666666
},
{
"created_at": "2025-01-17T01:19:50.543Z",
"value": 19.2
},
{
"created_at": "2025-01-17T01:25:50.534Z",
"value": 19.2
},
{
"created_at": "2025-01-17T01:31:50.545Z",
"value": 19.2
},
{
"created_at": "2025-01-17T01:37:50.600Z",
"value": 19.2
},
{
"created_at": "2025-01-17T01:43:50.579Z",
"value": 19.2
},
{
"created_at": "2025-01-17T01:49:50.562Z",
"value": 19.2
},
{
"created_at": "2025-01-17T01:55:50.611Z",
"value": 19.133333333333333
},
{
"created_at": "2025-01-17T02:01:50.520Z",
"value": 19.1
},
{
"created_at": "2025-01-17T02:07:50.635Z",
"value": 19.1
},
{
"created_at": "2025-01-17T02:13:50.653Z",
"value": 19.066666666666666
},
{
"created_at": "2025-01-17T02:19:50.659Z",
"value": 19
},
{
"created_at": "2025-01-17T02:25:50.677Z",
"value": 19
},
{
"created_at": "2025-01-17T02:31:50.583Z",
"value": 19
},
{
"created_at": "2025-01-17T02:37:50.649Z",
"value": 19
},
{
"created_at": "2025-01-17T02:43:50.674Z",
"value": 19
},
{
"created_at": "2025-01-17T02:49:50.729Z",
"value": 18.9
},
{
"created_at": "2025-01-17T02:55:50.683Z",
"value": 18.9
},
{
"created_at": "2025-01-17T03:01:50.981Z",
"value": 18.9
},
{
"created_at": "2025-01-17T03:07:50.677Z",
"value": 18.9
},
{
"created_at": "2025-01-17T03:13:50.686Z",
"value": 18.9
},
{
"created_at": "2025-01-17T03:19:50.763Z",
"value": 18.9
},
{
"created_at": "2025-01-17T03:25:50.689Z",
"value": 18.9
},
{
"created_at": "2025-01-17T03:31:50.694Z",
"value": 18.9
},
{
"created_at": "2025-01-17T03:37:50.684Z",
"value": 18.9
},
{
"created_at": "2025-01-17T03:43:50.670Z",
"value": 18.9
},
{
"created_at": "2025-01-17T03:49:50.687Z",
"value": 18.9
},
{
"created_at": "2025-01-17T03:55:50.684Z",
"value": 18.9
},
{
"created_at": "2025-01-17T04:01:50.943Z",
"value": 18.9
},
{
"created_at": "2025-01-17T04:07:50.770Z",
"value": 18.9
},
{
"created_at": "2025-01-17T04:13:50.758Z",
"value": 18.9
},
{
"created_at": "2025-01-17T04:19:50.775Z",
"value": 19
},
{
"created_at": "2025-01-17T04:25:50.771Z",
"value": 19
},
{
"created_at": "2025-01-17T04:31:50.775Z",
"value": 19
},
{
"created_at": "2025-01-17T04:37:50.777Z",
"value": 19
},
{
"created_at": "2025-01-17T04:43:50.666Z",
"value": 19
},
{
"created_at": "2025-01-17T04:49:50.748Z",
"value": 19.1
},
{
"created_at": "2025-01-17T04:55:51.216Z",
"value": 19.1
},
{
"created_at": "2025-01-17T05:01:50.766Z",
"value": 19.1
},
{
"created_at": "2025-01-17T05:07:50.756Z",
"value": 19.166666666666668
},
{
"created_at": "2025-01-17T05:13:50.774Z",
"value": 19.2
},
{
"created_at": "2025-01-17T05:19:50.769Z",
"value": 19.2
},
{
"created_at": "2025-01-17T05:25:50.788Z",
"value": 19.2
},
{
"created_at": "2025-01-17T05:31:51.296Z",
"value": 19.2
},
{
"created_at": "2025-01-17T05:37:50.776Z",
"value": 19.2
},
{
"created_at": "2025-01-17T05:43:51.042Z",
"value": 19.2
},
{
"created_at": "2025-01-17T05:49:50.725Z",
"value": 19.3
},
{
"created_at": "2025-01-17T05:55:50.787Z",
"value": 19.3
},
{
"created_at": "2025-01-17T06:01:50.776Z",
"value": 19.3
},
{
"created_at": "2025-01-17T06:07:50.817Z",
"value": 19.3
},
{
"created_at": "2025-01-17T06:13:50.801Z",
"value": 19.3
},
{
"created_at": "2025-01-17T06:19:50.807Z",
"value": 19.3
},
{
"created_at": "2025-01-17T06:25:50.825Z",
"value": 19.3
},
{
"created_at": "2025-01-17T06:31:50.808Z",
"value": 19.2
},
{
"created_at": "2025-01-17T06:37:50.817Z",
"value": 19.2
},
{
"created_at": "2025-01-17T06:43:50.796Z",
"value": 19.2
},
{
"created_at": "2025-01-17T06:49:50.810Z",
"value": 19.2
},
{
"created_at": "2025-01-17T06:55:50.856Z",
"value": 19.2
},
{
"created_at": "2025-01-17T07:01:50.833Z",
"value": 19.2
},
{
"created_at": "2025-01-17T07:07:50.810Z",
"value": 19.2
},
{
"created_at": "2025-01-17T07:13:50.814Z",
"value": 19.2
},
{
"created_at": "2025-01-17T07:19:50.808Z",
"value": 19.2
},
{
"created_at": "2025-01-17T07:25:54.029Z",
"value": 19.2
},
{
"created_at": "2025-01-17T07:31:50.821Z",
"value": 19.2
},
{
"created_at": "2025-01-17T07:37:50.812Z",
"value": 19.166666666666668
},
{
"created_at": "2025-01-17T07:43:50.826Z",
"value": 19.1
},
{
"created_at": "2025-01-17T07:49:50.865Z",
"value": 19.1
},
{
"created_at": "2025-01-17T07:55:50.870Z",
"value": 19.1
},
{
"created_at": "2025-01-17T08:01:50.939Z",
"value": 19.1
},
{
"created_at": "2025-01-17T08:07:50.816Z",
"value": 19.1
},
{
"created_at": "2025-01-17T08:13:50.833Z",
"value": 19.1
},
{
"created_at": "2025-01-17T08:19:50.828Z",
"value": 19.033333333333335
},
{
"created_at": "2025-01-17T08:25:50.856Z",
"value": 19
},
{
"created_at": "2025-01-17T08:31:50.849Z",
"value": 19
},
{
"created_at": "2025-01-17T08:37:50.854Z",
"value": 19
},
{
"created_at": "2025-01-17T08:43:50.865Z",
"value": 19
},
{
"created_at": "2025-01-17T08:49:50.892Z",
"value": 18.933333333333334
},
{
"created_at": "2025-01-17T08:55:50.843Z",
"value": 18.9
},
{
"created_at": "2025-01-17T09:01:50.860Z",
"value": 18.9
},
{
"created_at": "2025-01-17T09:07:50.856Z",
"value": 18.9
},
{
"created_at": "2025-01-17T09:13:50.879Z",
"value": 18.9
},
{
"created_at": "2025-01-17T09:19:50.863Z",
"value": 18.9
},
{
"created_at": "2025-01-17T09:25:50.884Z",
"value": 18.9
},
{
"created_at": "2025-01-17T09:31:55.588Z",
"value": 18.9
},
{
"created_at": "2025-01-17T09:37:50.834Z",
"value": 18.9
},
{
"created_at": "2025-01-17T09:43:53.317Z",
"value": 18.9
},
{
"created_at": "2025-01-17T09:49:50.942Z",
"value": 18.9
},
{
"created_at": "2025-01-17T09:55:50.862Z",
"value": 18.9
},
{
"created_at": "2025-01-17T10:01:50.908Z",
"value": 18.9
},
{
"created_at": "2025-01-17T10:07:50.824Z",
"value": 18.9
},
{
"created_at": "2025-01-17T10:13:51.246Z",
"value": 18.9
},
{
"created_at": "2025-01-17T10:19:50.939Z",
"value": 18.933333333333334
},
{
"created_at": "2025-01-17T10:25:50.896Z",
"value": 19
},
{
"created_at": "2025-01-17T10:31:51.603Z",
"value": 19
},
{
"created_at": "2025-01-17T10:37:50.910Z",
"value": 19
},
{
"created_at": "2025-01-17T10:43:50.920Z",
"value": 19
},
{
"created_at": "2025-01-17T10:49:50.967Z",
"value": 19
},
{
"created_at": "2025-01-17T10:53:50.930Z",
"value": 19
},
{
"created_at": "2025-01-17T10:57:51.005Z",
"value": 19
},
{
"created_at": "2025-01-17T11:01:50.957Z",
"value": 19.05
},
{
"created_at": "2025-01-17T11:05:50.935Z",
"value": 19.1
},
{
"created_at": "2025-01-17T11:09:50.957Z",
"value": 19.1
},
{
"created_at": "2025-01-17T11:13:50.922Z",
"value": 19.1
},
{
"created_at": "2025-01-17T11:17:50.927Z",
"value": 19.1
},
{
"created_at": "2025-01-17T11:21:50.950Z",
"value": 19.15
},
{
"created_at": "2025-01-17T11:25:51.227Z",
"value": 19.2
},
{
"created_at": "2025-01-17T11:29:51.047Z",
"value": 19.2
},
{
"created_at": "2025-01-17T11:33:50.946Z",
"value": 19.25
},
{
"created_at": "2025-01-17T11:37:50.991Z",
"value": 19.3
},
{
"created_at": "2025-01-17T11:41:50.983Z",
"value": 19.3
},
{
"created_at": "2025-01-17T11:45:50.995Z",
"value": 19.5
},
{
"created_at": "2025-01-17T11:49:51.006Z",
"value": 19.5
},
{
"created_at": "2025-01-17T11:53:50.970Z",
"value": 19.5
},
{
"created_at": "2025-01-17T11:57:51.013Z",
"value": 19.6
},
{
"created_at": "2025-01-17T12:01:51.045Z",
"value": 19.6
},
{
"created_at": "2025-01-17T12:05:51.225Z",
"value": 19.65
},
{
"created_at": "2025-01-17T12:09:50.976Z",
"value": 19.7
},
{
"created_at": "2025-01-17T12:13:51.104Z",
"value": 19.7
},
{
"created_at": "2025-01-17T12:17:50.934Z",
"value": 19.7
},
{
"created_at": "2025-01-17T12:21:50.970Z",
"value": 19.7
},
{
"created_at": "2025-01-17T12:25:51.059Z",
"value": 19.7
},
{
"created_at": "2025-01-17T12:29:50.995Z",
"value": 19.7
},
{
"created_at": "2025-01-17T12:33:50.992Z",
"value": 19.7
},
{
"created_at": "2025-01-17T12:37:50.997Z",
"value": 19.8
},
{
"created_at": "2025-01-17T12:41:50.944Z",
"value": 19.8
},
{
"created_at": "2025-01-17T12:45:51.199Z",
"value": 19.8
},
{
"created_at": "2025-01-17T12:49:50.987Z",
"value": 19.8
},
{
"created_at": "2025-01-17T12:53:50.918Z",
"value": 19.8
},
{
"created_at": "2025-01-17T12:57:51.003Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:01:51.025Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:05:50.941Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:09:51.024Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:13:51.025Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:17:51.006Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:21:51.063Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:25:50.995Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:29:51.012Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:33:51.038Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:37:51.110Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:41:51.205Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:45:51.221Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:49:51.050Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:53:50.954Z",
"value": 19.8
},
{
"created_at": "2025-01-17T13:57:51.071Z",
"value": 19.7
},
{
"created_at": "2025-01-17T14:01:51.049Z",
"value": 19.7
},
{
"created_at": "2025-01-17T14:05:51.008Z",
"value": 19.65
},
{
"created_at": "2025-01-17T14:09:51.044Z",
"value": 19.6
},
{
"created_at": "2025-01-17T14:13:51.024Z",
"value": 19.6
},
{
"created_at": "2025-01-17T14:17:51.079Z",
"value": 19.6
},
{
"created_at": "2025-01-17T14:21:51.041Z",
"value": 19.6
},
{
"created_at": "2025-01-17T14:25:51.074Z",
"value": 19.55
},
{
"created_at": "2025-01-17T14:29:51.071Z",
"value": 19.5
},
{
"created_at": "2025-01-17T14:33:51.043Z",
"value": 19.5
},
{
"created_at": "2025-01-17T14:37:51.069Z",
"value": 19.5
},
{
"created_at": "2025-01-17T14:41:51.116Z",
"value": 19.5
},
{
"created_at": "2025-01-17T14:45:51.087Z",
"value": 19.45
},
{
"created_at": "2025-01-17T14:49:51.101Z",
"value": 19.4
},
{
"created_at": "2025-01-17T14:53:51.096Z",
"value": 19.4
},
{
"created_at": "2025-01-17T14:57:51.096Z",
"value": 19.4
},
{
"created_at": "2025-01-17T15:01:51.039Z",
"value": 19.4
},
{
"created_at": "2025-01-17T15:05:51.321Z",
"value": 19.35
},
{
"created_at": "2025-01-17T15:09:51.163Z",
"value": 19.3
},
{
"created_at": "2025-01-17T15:13:51.135Z",
"value": 19.3
},
{
"created_at": "2025-01-17T15:17:51.114Z",
"value": 19.3
},
{
"created_at": "2025-01-17T15:21:51.257Z",
"value": 19.3
},
{
"created_at": "2025-01-17T15:25:51.158Z",
"value": 19.25
},
{
"created_at": "2025-01-17T15:29:51.156Z",
"value": 19.2
},
{
"created_at": "2025-01-17T15:33:51.128Z",
"value": 19.2
},
{
"created_at": "2025-01-17T15:37:51.129Z",
"value": 19.2
},
{
"created_at": "2025-01-17T15:41:51.525Z",
"value": 19.2
},
{
"created_at": "2025-01-17T15:45:51.150Z",
"value": 19.15
},
{
"created_at": "2025-01-17T15:49:51.151Z",
"value": 19.1
},
{
"created_at": "2025-01-17T15:53:51.151Z",
"value": 19.1
},
{
"created_at": "2025-01-17T15:57:51.204Z",
"value": 19.1
},
{
"created_at": "2025-01-17T16:01:51.234Z",
"value": 19.1
},
{
"created_at": "2025-01-17T16:05:51.173Z",
"value": 19.05
},
{
"created_at": "2025-01-17T16:09:51.159Z",
"value": 19
},
{
"created_at": "2025-01-17T16:13:51.163Z",
"value": 19
},
{
"created_at": "2025-01-17T16:17:51.130Z",
"value": 18.9
},
{
"created_at": "2025-01-17T16:21:51.157Z",
"value": 18.9
},
{
"created_at": "2025-01-17T16:25:51.374Z",
"value": 18.9
},
{
"created_at": "2025-01-17T16:29:51.230Z",
"value": 18.9
},
{
"created_at": "2025-01-17T16:33:51.228Z",
"value": 18.9
},
{
"created_at": "2025-01-17T16:37:51.181Z",
"value": 18.9
},
{
"created_at": "2025-01-17T16:41:51.167Z",
"value": 18.9
},
{
"created_at": "2025-01-17T16:45:51.147Z",
"value": 18.9
},
{
"created_at": "2025-01-17T16:49:51.169Z",
"value": 18.9
},
{
"created_at": "2025-01-17T16:53:52.907Z",
"value": 18.9
},
{
"created_at": "2025-01-17T16:57:51.178Z",
"value": 18.9
},
{
"created_at": "2025-01-17T17:01:59.984Z",
"value": 18.9
},
{
"created_at": "2025-01-17T17:05:51.221Z",
"value": 18.85
},
{
"created_at": "2025-01-17T17:09:51.356Z",
"value": 18.8
},
{
"created_at": "2025-01-17T17:13:51.270Z",
"value": 18.8
},
{
"created_at": "2025-01-17T17:17:55.134Z",
"value": 18.9
},
{
"created_at": "2025-01-17T17:21:51.196Z",
"value": 18.9
},
{
"created_at": "2025-01-17T17:25:51.212Z",
"value": 18.9
},
{
"created_at": "2025-01-17T17:29:51.213Z",
"value": 18.9
},
{
"created_at": "2025-01-17T17:33:51.247Z",
"value": 18.9
},
{
"created_at": "2025-01-17T17:37:51.306Z",
"value": 18.9
},
{
"created_at": "2025-01-17T17:41:51.329Z",
"value": 18.9
},
{
"created_at": "2025-01-17T17:45:51.273Z",
"value": 18.9
},
{
"created_at": "2025-01-17T17:49:51.382Z",
"value": 18.9
},
{
"created_at": "2025-01-17T17:53:51.575Z",
"value": 18.9
},
{
"created_at": "2025-01-17T17:57:51.329Z",
"value": 18.9
},
{
"created_at": "2025-01-17T18:01:51.273Z",
"value": 18.9
},
{
"created_at": "2025-01-17T18:05:51.278Z",
"value": 18.9
},
{
"created_at": "2025-01-17T18:09:51.439Z",
"value": 18.9
},
{
"created_at": "2025-01-17T18:13:51.275Z",
"value": 18.9
},
{
"created_at": "2025-01-17T18:17:51.294Z",
"value": 19
},
{
"created_at": "2025-01-17T18:21:51.304Z",
"value": 19
},
{
"created_at": "2025-01-17T18:25:51.285Z",
"value": 19.05
},
{
"created_at": "2025-01-17T18:29:51.284Z",
"value": 19.1
},
{
"created_at": "2025-01-17T18:33:51.441Z",
"value": 19.1
},
{
"created_at": "2025-01-17T18:37:51.294Z",
"value": 19.1
},
{
"created_at": "2025-01-17T18:41:51.280Z",
"value": 19.1
},
{
"created_at": "2025-01-17T18:45:51.308Z",
"value": 19.200000000000003
},
{
"created_at": "2025-01-17T18:49:51.321Z",
"value": 19.3
},
{
"created_at": "2025-01-17T18:53:51.267Z",
"value": 19.3
},
{
"created_at": "2025-01-17T18:57:51.295Z",
"value": 19.4
},
{
"created_at": "2025-01-17T19:01:51.619Z",
"value": 19.4
},
{
"created_at": "2025-01-17T19:05:51.331Z",
"value": 19.45
},
{
"created_at": "2025-01-17T19:09:51.310Z",
"value": 19.5
},
{
"created_at": "2025-01-17T19:13:51.465Z",
"value": 19.5
},
{
"created_at": "2025-01-17T19:17:51.366Z",
"value": 19.5
},
{
"created_at": "2025-01-17T19:21:51.421Z",
"value": 19.5
},
{
"created_at": "2025-01-17T19:25:51.387Z",
"value": 19.5
},
{
"created_at": "2025-01-17T19:29:51.353Z",
"value": 19.6
},
{
"created_at": "2025-01-17T19:33:51.454Z",
"value": 19.6
},
{
"created_at": "2025-01-17T19:37:52.884Z",
"value": 19.6
},
{
"created_at": "2025-01-17T19:41:51.306Z",
"value": 19.6
},
{
"created_at": "2025-01-17T19:45:51.416Z",
"value": 19.6
},
{
"created_at": "2025-01-17T19:49:51.388Z",
"value": 19.6
},
{
"created_at": "2025-01-17T19:53:51.369Z",
"value": 19.6
},
{
"created_at": "2025-01-17T19:57:51.377Z",
"value": 19.6
},
{
"created_at": "2025-01-17T20:01:51.376Z",
"value": 19.6
},
{
"created_at": "2025-01-17T20:05:51.415Z",
"value": 19.6
},
{
"created_at": "2025-01-17T20:09:51.492Z",
"value": 19.6
},
{
"created_at": "2025-01-17T20:13:51.399Z",
"value": 19.6
},
{
"created_at": "2025-01-17T20:17:51.367Z",
"value": 19.6
},
{
"created_at": "2025-01-17T20:21:51.391Z",
"value": 19.6
},
{
"created_at": "2025-01-17T20:25:51.329Z",
"value": 19.6
},
{
"created_at": "2025-01-17T20:29:51.411Z",
"value": 19.5
},
{
"created_at": "2025-01-17T20:33:51.376Z",
"value": 19.5
},
{
"created_at": "2025-01-17T20:37:51.394Z",
"value": 19.5
},
{
"created_at": "2025-01-17T20:41:51.386Z",
"value": 19.5
},
{
"created_at": "2025-01-17T20:45:57.245Z",
"value": 19.5
}
]
}
}
1 Like
Since the values range from 18.8 to 19.8, the min and max on the y-axis should rather be 18 and 20 instead of 18.75 and 20.32 
Note that on the graph I’m showing you I’ve hidden the other two curves, but those are my temperature setpoints which have a fixed value over the displayed period: 18.9 and 19.1 (so a priori no influence on the calculation of the y-axis min/max).
Thanks! I’ve added that to my to-do, I’ll look into changing that
Otherwise, if you have a dev environment I can show you how to test this change yourself
Cool, thanks for adding it to your todo. I don’t have a dev environment, so I’ll trust you for the tests
I just watched the recap video, it’s great. Thanks for everything you do for this project — it’s really become essential for running my home. And I’m totally up for trying to help you spot the little annoying UX things (like the ordering of those
1 Like
I’ll make a post on the forum, but it’ll be exactly like it is now:
I implemented your algorithm @StephaneB !
Before :
After :
I’d welcome more feedback
I made a Gladys Plus build to get feedback on whether it looks better visually for you :
1 Like
Hello. Great on most of the charts 
, I have something odd on one chart (electricity consumption over 30 days).
The new one has twice as many dashed lines
I’ve added the custom calculation for the step proposed by @StephaneB, but it can be reviewed 
I like it but there’s a catch…
If I remove certain curves, the scale is not recalculated…
Currently:
Ah, that may be because I didn’t express myself well in my algo. My little table was actually referring to the number of steps, not the step size. The idea being to ensure there are always between 3 and 5 steps (the ‹ p2 › in my table). Is that what you considered, Pierre-Gilles, to define the ‹ stepSize › sent to Apexchart?
Here is the code @StephaneB
calculateYAxisRange = () => {
const { series } = this.props;
// Extract all values from all series
const allValues = series.flatMap(serie => serie.data.map(([_, value]) => value));
const minVal = Math.min(...allValues);
const maxVal = Math.max(...allValues);
const range = maxVal - minVal;
const f = Math.pow(10, Math.floor(Math.log10(Math.abs(range)))); // Scaling factor
const minY = Math.floor(minVal / f) * f;
const maxY = Math.ceil(maxVal / f) * f;
// Optional: Constrain the step size
const theoreticalStep = (maxY - minY) / f;
let step = f; // Default step size
// Adjust step size for better visuals
if (theoreticalStep < 5) {
step = f / 2;
} else if (theoreticalStep > 10) {
step = f * 2;
}
return { minY, maxY, step };
};
If you give me the formula to calculate the step I can modify