You can either set a fixed range, remove datapoints or leave auto range on. That’s it for the moment
1 Like
I really appreaciate your help. That works (almost).
Can you tell me why there are no horizontal grid lines in the lower graph?
I don’t know why that’s happening, try google or chatgpt on how to force a specific grid spacing.
How do I find the possible options working under Plotly Card?
The translation is simple: instead of javascript object, use yaml notation. I suggest you try with plotlyjs instead of plotly python, the translation is more direct: write yaml instead of js objects. You can google or ask ChatGPT “how to xyz in plotlyjs”.
In JS, plotly gets 3 parameters: data, layout and config. Data is the entities, layout is layout and config is config. There are a bunch of extra features I added, which are in the readme of the repo.
Also, use the example index linked in the repo
@mateine,
many thanks.
I found a parameter “showgrid: true” which fixes the y-grid lines in the lower graph.
May I ask you another question?
I have a signal of states (_txt) which I want to show in a plotly graph as a subplot - as shown in the picture using a history-graph which, of course, is independent of the plotly graph below. But I would like to zoom all three graphs together.
Is it possible with plotly to re-create the history-card as shown so that I can add it as a subplot?
Many thanks for your help.
For reference the yaml of the history card:
cards:
- type: history-graph
entities:
- entity: sensor.eu08l_hp1_operating_state_txt
name: Mod.
- entity: sensor.eu08l_hp1_request_type_txt
name: Req.
title: Betriebsmodus
hours_to_show: 168
I found a parameter “showgrid: true” which fixes the y-grid lines in the lower graph.
Well done! I wonder what deactivated it in the first place?
Is it possible with plotly to re-create the history-card as shown so that I can add it as a subplot?
Maybe, i never tried
What a great card, I cannot believe, I just found it… 
Thank you very much! 
But, as with most “new” things, I already could use your oppinion.
What I’m after is some kind of graph, to show a “comfort zone”. I’m using the Thermal Comfort integration (forum thread | Github) and want to show, preferrably in 3D, if the actual values are in that comfort zone.
I’m thinking about using a scatter3D. Do you have other ideas, what to use or how to show something like this?
Thanks for your help (and again for the card)!
1 Like
Maybe heatmaps?
You may find inspiration in the examples index: lovelace-plotly-graph-card/discussion-index.md at c43112dd9dcb9d4249b6eaf81c44954a609334d6 · dbuezas/lovelace-plotly-graph-card · GitHub
1 Like
That’s a good idea, I’ll try that, thank you! 
I saw that massive example section, and already found two other Apex-charts that I want to replace with examples from that page… 
I’ll tinker around with it, and I’m sure I’ll be back with stupid questions!
Thanks and have a good start in the upcoming week!
1 Like
From the documentation of Plotly i can see that barcornerradius is an option:
But when I add it in the yaml it does not work. Can this be because it recently was added to Plotly?
I tried the following two options without succes
type: custom:plotly-graph
entities:
- entity: sensor.people_in_hallway
type: bar
marker:
cornerradius: 15
layout:
barcornerradius: 20%
You’re right with your guess, the version of Plotly that is used by this card is 2.18.1 (see here), but the cornerradius is only available since 2.29.0 (see here).
I can’t say if this works out of the box, if the Plotly version is updated, but with the version used in this card, it is def. not available atm. Sorry!
1 Like
I would like to produce a heatmap or histogram2d similar to the following that shows per hour blocks of exported electricity. Has anybody produced something similar?
I want to plot the percentage charge of my solar panel battery. It is set up so that it will always be between 40% and 100%. Therefore simply plotting the values means I have a large space under the plot the whole time.
I’ve tried a ‘- map_y_numbers’ function to subtract 40 but that alters the ‘y’ scale as well.
Is there a way that I can only display the values from 40 to 100 while keeping the Y scale from 40 to 100 as well? (Something like the ‘time_offset’ but for the Y axis.)
Susan
Edit: I think I found it:
layout:
yaxis:
fixedrange: true
range:
- 40
- 100
Hello to everyone, i need your help.
i’ve a graph with: solar elevation, solar lux and precipitation (past and forecasted). The problem is that Y axis are mixed and negative solar elevation appears above the other data. Someone can help me fix this? or, how can i apply a filter to remove <0 elevation? i’ve a similar problem when precipitations (past and forecasted) are zero, its yaxis go in the middle of the graph.
i mean, zero should be zero for each axis
type: custom:plotly-graph
entities:
- entity: sensor.sun_solar_elevation
showlegend: false
fill: tozeroy
fillcolor: rgba(255, 255, 128, 0.2)
line:
color: rgba(255, 230, 128, 1)
width: 1
- entity: sensor.ecowitt_ws2900_solar_lux
showlegend: false
fill: tozeroy
fillcolor: rgba(255, 181, 129, 0.7)
line:
color: rgba(255, 145, 138, 0.9)
width: 1
- entity: sensor.ecowitt_ws2900_hourly_rain_rate
fillcolor: rgba(31, 119, 180,.6)
line:
color: rgba(31, 119, 180, 1)
legendgroup: 1
showlegend: false
name: 🌧 Precipitation
filters:
- store_var: precipitation
fill: tozeroy
- entity: sensor.weather_channel_forecast_hourly
legendgroup: 1
showlegend: false
name: Precipitation
fill: tozeroy
fillcolor: rgba(31, 119, 180,.3)
line:
color: rgba(31, 119, 180, 1)
dash: dot
unit_of_measurement: mm
filters:
- fn: |-
({ meta, vars }) => ({
xs: [vars.precipitation.xs.slice(-1)[0],...meta.forecast.map(({ datetime }) => new Date(datetime))],
ys: [vars.precipitation.ys.slice(-1)[0],...meta.forecast.map(({ precipitation }) => precipitation)],
})
- entity: ''
name: Now
showlegend: false
line:
width: 2
dash: dot
color: rgba(144, 191, 255, 0.9)
x: $ex [Date.now(), Date.now()]
'y':
- 0
- 10
time_offset: 8h
hours_to_show: 24
refresh_interval: 10
layout:
autosize: true
margin:
autoexpand: true
font:
family: Geologica
xaxis:
rangeselector:
'y': 1.1
buttons:
- count: 7
step: day
- count: 3
step: day
- count: 1
step: day
- count: 12
step: hour
thanks you all in advance
This example is relevant: Heatmap of 30-Panel Solar Array's Current States · dbuezas/lovelace-plotly-graph-card · Discussion #277 · GitHub
I guess you want the zero on all axes to be in the same place, right?
There’s unfortunately no feature in plotly for that, you may want to watch this issue: Multi values graph do not share same ZERO · Issue #4712 · plotly/plotly.py · GitHub
Thanks so much, i will follow it. for the moment i’ve removed the tozeroy filling and seems the problem is “fixed”.
Hi, I’m noticing one strange bheavior in my graphs.
I use HA on PC, tablet and smartphone, on PC and smartphone the data are always correct but on tablet, wich is always on with HA running (with connection closes after 5 minutes) some times the graph is not updated correctly. if I reload HA the graph are show correctly
is there some parameter to clear cache before loading data? or something like that?
For water useage I have a chart with bars with historic use each hour. Now I am trying to change the hoverlegend timestamp. The stamp is now “21 aug 2024, 02:00”
The stamp that I am trying to create is ma 21 aug 2024, 02:00 - 03:00
For the entity I used the hovertemplate: "%{y:.0f}L".
I tried to add the date by the entity with hovertemplate: "%{x|%a %e %b %Y, %H:00}-HH %{y:.0f}L", but then it is added to the entity only and not changed for the “hover legend”.
- Can I change the timestamp somewhere in the layout and not only for the entity so I can change the stamp of the total hover legend?
- How can I perform calculations to make the “HH” + 1 hour?
Does someone have a example or idea how to change it or point me in a direction what to use?
Hello,
I need your help for my plotty graph
I do not understand why plotty merge November and December in “the month view”
type: custom:plotly-graph
hours_to_show: 4920
layout:
barmode: overlay
yaxis:
visible: true
fixedrange: true
autorange_after_scroll: true
rangegmode: tozero
entities:
- entity: sensor.gaz_total_usage_daily_hp
points_per_hour: 1
barmode: overlay
statistic: state
period:
0m: day
100d: month
100w: month
autorange_after_scroll: true
type: bar
yaxis: 'y'
base: 0
unit_of_measurement: m3
name: Cette année
texttemplate: '%{y:0.1f} m3'
connectgaps: true
show_value: false
fill: tozeroy
filters:
- filter: i>0
marker:
color: rgba(255, 100, 100, 0.6)
- entity: sensor.gaz_total_usage_daily_hp
barmode: overlay
statistic: state
period:
0m: day
100d: month
100w: month
points_per_hour: 1
time_offset: 366d
autorange_after_scroll: true
type: bar
yaxis: 'y'
base: 0
unit_of_measurement: m3
name: L'année dernière
texttemplate: '%{y:0.1f} m3'
connectgaps: false
fill: tozeroy
show_value: false
zero_y_every: d
filters:
- filter: i>0
marker:
color: rgba(255, 255, 100, 0.4)
- entity: ''
name: Now
yaxis: y9
showlegend: false
line:
width: 1
dash: dot
color: deepskyblue
x: $ex [Date.now(), Date.now()]
'y':
- 0
- 1
Thanks
EDIT : One more question Does plotty handle leap year ? Everything is one day shift …
EDIT 2 :
On July, plotty on month view do not detect any data ( only green bar ). Why ?
Check in the standard statistics card if the monthly statistics are not actually broken in your db