You need to use the resample filter on both so the arrays are aligned (i.e. each index points to the same date on both), and then the store_var filter on the secondary entity.
This way you can access both histories from within the filters of one.
I suggest you visit the discussions section of the repository and see the examples there. It requires some thought but it will hopefully click after that 
Thank you. Iāll post in the repoās discussion board.
Thanks a lot ! It works fine
This thread and the examples in it have been a huge help! Maybe I can return the favor for someone out there by sharing where Iām at with my graph of room temps and HVAC stuff.
Is there a way to limit the X-axis panning to a specific range? Iāll often end up panning or zooming to a mostly blank graph of future time.
type: custom:plotly-graph
hours_to_show: 24
refresh_interval: auto
autorange_after_scroll: true
defaults:
entity:
show_value: false
line:
width: 2
yaxis: 'y'
yaxes:
fixedrange: true
entities:
- entity: sensor.temp_sensor_1_temperature_2
name: Bedroom
line:
color: green
- entity: sensor.temp_sensor_2_temperature_2
name: MBR
line:
color: dodgerblue
- entity: sensor.temp_sensor_3_temperature_2
name: Front Office
line:
color: chocolate
- entity: sensor.temp_sensor_5_temperature_2
name: Playroom
line:
color: 8F54D3
- entity: sensor.temp_sensor_4_temperature_2
name: Living Room
line:
color: gold
- entity: climate.alarm_com_smart_thermostat
attribute: current_temperature
name: Thermostat
unit_of_measurement: Ā°F
line:
color: lightgray
width: 1
opacity: 0.6
- entity: climate.alarm_com_smart_thermostat
attribute: target_temp_low
name: Target Low
unit_of_measurement: Ā°F
line:
color: red
dash: dot
width: 1
opacity: 0.6
- entity: climate.alarm_com_smart_thermostat
attribute: target_temp_high
name: Target High
unit_of_measurement: Ā°F
line:
color: blue
dash: dot
width: 1
visible: false
- entity: climate.alarm_com_smart_thermostat
attribute: hvac_action
name: Heating
filters:
- map_y: 'y === "heating" ? 150 : 0'
yaxis: y2
fill: tozeroy
fillcolor: rgba(255, 99, 71, 0.3)
line:
color: tomato
width: 0
- entity: climate.alarm_com_smart_thermostat
attribute: hvac_action
name: Cooling
filters:
- map_y: 'y === "cooling" ? 150 : 0'
yaxis: y2
fill: tozeroy
fillcolor: rgba(4, 90, 150, 0.2)
line:
color: rgba(4, 90, 150, 0.2)
width: 0
- entity: sensor.openweathermap_temperature
name: Outdoor
yaxis: y2
fill: tozeroy
fillcolor: rgba(200, 200, 200, 0.15)
line:
color: white
width: 0
layout:
margin:
t: 50
l: 15
showlegend: false
legend:
x: 0.1
'y': -0.8
yaxis:
side: right
tickfont:
color: lightgray
autorange_after_scroll: true
autorange: true
showgrid: true
yaxis2:
side: left
visible: false
overlaying: 'y'
tickmode: sync
range:
- 0
- 150
xaxis:
tickangle: 0
tickfont:
color: lightgray
tickformat: |-
%I%p
%b %d
hoverformat: '%I:%M%p'
rangeselector:
bgcolor: rgba(0,0,0,.45)
x: 0.01
'y': 0.03
buttons:
- count: 12
step: hour
- count: 18
step: hour
- count: 24
step: hour
- count: 36
step: hour
- count: 72
step: hour
annotations:
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: green'>"
+ Math.round(hass.states['sensor.temp_sensor_1_temperature_2'].state) + "</span></span>ĀŗF<br>"
+ "</span><span style=''>Bedroom</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.06
'y': 1.3
showarrow: false
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: dodgerblue'>"
+ Math.round(hass.states['sensor.temp_sensor_2_temperature_2'].state) + "</span></span>ĀŗF<br>"
+ "</span><span style=''>MBR</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.27
'y': 1.3
showarrow: false
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: chocolate'>"
+ Math.round(hass.states['sensor.temp_sensor_3_temperature_2'].state) + "</span></span>ĀŗF<br>"
+ "</span><span style=''>Front Office</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.51
'y': 1.3
showarrow: false
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: #8F54D3'>"
+ Math.round(hass.states['sensor.temp_sensor_5_temperature_2'].state) + "</span></span>ĀŗF<br>"
+ "</span><span style=''>Playroom</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.75
'y': 1.3
showarrow: false
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: gold'>"
+ Math.round(hass.states['sensor.temp_sensor_4_temperature_2'].state) + "</span></span>ĀŗF<br>"
+ "</span><span style=''>Living Room</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.99
'y': 1.3
showarrow: false
Iāve just installed Plotly and it seems to be doing exactly what I want.
I must admit that Iām not really sure where to get the documentation for it other than looking at the example and guessing.
Anyway, I have managed to get my gas usage plot by month with the following yaml:
type: custom:plotly-graph
entities:
- entity: sensor.daily_gas_consumption
type: bar
statistic: sum
period: month
name: Monthly
texttemplate: '%{y}'
filters:
- filter: x < new Date(Date.now() - 1000*60*60*24*31)
- entity: sensor.daily_gas_consumption
type: bar
statistic: sum
period: month
name: This Month
texttemplate: '%{y}'
filters:
- filter: x > new Date(Date.now() - 1000*60*60*24*31)
refresh_interval: 30
hours_to_show: 6M
layout:
xaxis:
rangeselector:
'y': 1.2
buttons:
- count: 1
step: month
- count: 3
step: month
- count: 6
step: month
and it works well (although much of it is copied without full understanding).
However when I change the button to (say) 1 month, it would be great if I could somehow change the āperiodā to be āweekā.
Is there a way?
Susan
Happy to hear you find it useful!
Thereās a way, see GitHub - dbuezas/lovelace-plotly-graph-card: Highly customisable Lovelace card to plot interactive graphs. Brings scrolling, zooming, and much more!
The period can be set to auto or custom ranges for each period can be defined
Hello everyone - having trouble with the color scheme of the card itself.
By default the card background is black
If I add
layout:
paper_bgcolor: transparent
plot_bgcolor: transparent
I get this
I want the card on the right to use the same color scheme (driven by theme) as the card on the left here for illustration purposes.
Can someone help ?
Thanks !
Try rgba(0, 0, 0, 0.3) instead of transparent
Thank you - much better !
How about formatting the legend so it does not hide under the buttons (1h, 1d, 7d) and also changing the styling of those, black font for instance to improve visibility ?
Thank you so much
found it
added in layout section
legend:
y: 1.5
This card is absolutely amazing! Using it a lot for visualizing energy long term statistics.
Long term statistics are updated every 5 min during the HA recording period (10 days in my case). After the recording period, longterm statistics are kept standard on an hourly period.
I donāt know if itās possible, but is there any way to show the long term statistics for a 5 min period for as long as the 5 min period data is available and then seamlessly move over to the 1 hour period data as soon as there is no 5 min period data available anymore?
Now I need to choose:
5 min period: this gives me much more detail, but then there is no data anymore after 10 days
1 hour period: less detail, but then I can go back in history as long as I want
A combination of both would be great
Happy to hear youāre putting it to good use!
You can indeed do that:
filter filter remove all data whose x is greater or equal than the first x val of the first trace. Then append both xs and ys using the fn filter and store it back to a varAlternatively, look into period: auto
Hello,
first, thanks for this great card. Fast, and feature-rich!
second, I have a small issue: When restarting home assistant, then the curves shown by plotly have a gap for that period. Typically this gap is small, but for values which do not change often (e.g. a setvalue for a temperature), the gap is really big, and it is almost impossible to see the curve for this value.
The normal āHistory graph Cardā does not have this behaviour. Of course, this can be seen also as a feature of the plotly card, but I would need the behaviour of the history graph card with the plotly card.
My Yaml configuration looks like this:
type: custom:plotly-graph
refresh_interval: 100
hours_to_show: 24
layout:
height: 800
xaxis:
rangeselector:
'y': 1.2
buttons:
- count: 6
step: hour
- count: 1
step: day
- count: 7
step: day
- count: 1
step: month
entities:
- entity: sensor.esp32_soundroom_bathroomtempsensor
- entity: sensor.esp32_soundroom_soundroomtempsensor
- entity: number.esp32_soundroom_bathroomtempsetvalue
- entity: number.esp32_soundroom_soundroomtempsetvalue
And this is how the graph looks like with the gap (esp. the green and the red curves, the set values), you can also see the standard card (only one of the two setvalues is visible there):
Did I miss any configuration? How could I solve this?
Thanks a lot,
Klaus
P.S.: If needed, here is the configuration of the standard card:
type: history-graph
entities:
- entity: sensor.esp32_soundroom_bathroomtempsensor
- entity: number.esp32_soundroom_bathroomtempsetvalue
- entity: binary_sensor.esp32_soundroom_leadingroombathroom
- entity: binary_sensor.esp32_soundroom_heatingon
hours_to_show: 10
Thanks for the kind words!
Try the force_numeric filter.
Alternatively, I think you can set connections: true in the entity
What am I missing? I received an email, about a āScreek Workshopā, which lead me this Plotly interactive Graph Card. Liked what I was reading, and decided to install this Plotly Graph Card.
I am running HA and HACS which are both up-to-date, but when is search (in HACS) for āPlotly Graph Cardā. I get as far as āPloā when I get the message, āNo Repositories foundā .
What did I miss?
Found my mistake, I was searching in the Integration section, should have been in the Frontend section.
Thanks a lot, force_numeric did the job!
Has anybody an idea how to do a barpolar chart for wind direction?
Iāve tried a few things but as a rookie donāt know where to get started and the documentation has absolutely nothing in this respect.
That should be possible, what do you have in mind?
Can you make a pen and pencil drawing and show what the data looks like and what exactly you want to visualize
I suspect the OP is after a windrose card, this may meet his need although it would be good to solve the issue using plotly, one less integration to load into HAā¦