you could cap it to 0 with a filter: - map_y: Math.max(0,y)
Awesome!
Works!
Don’t get it completely. It is already >=0, but y-axis still show -1 to 1.
type: custom:plotly-graph
time_offset: 1.5d
entities:
- entity: sensor.weather_home_hourly
attribute: precipitation
filters:
- map_y: Math.max(0,y)
hours_to_show: 48
I assume because there’s only one y value
Anyone already changed the tickformat to local format
If I do it via
xaxis:
tickformat: '%H:%M<br>%d. %b'
I’m close
but you see, that now the date is repeated every tick and not as in standard, where it is in this case only on 00:00.
Andy idea/way to have it as in standard but localiced?
Hi!
Due to end-of-life of history explore card, I’m switching to plotly.
First of all congratulations for your card.
I’m currently trying to recreate one fo my cards (this one) with plotly.
I have a problem: as soon as I try the fill option, the yaxis goes to zero.
I would like to maintain:
- both dynamic yaxis
- and fill
Anybody knows a solution?
I found this topic: Maintain min/max axis control while still filling down to y axis as with fill='tozeroy' - 📊 Plotly Python - Plotly Community Forum
Is it possibile to achieve something like that in home assistant plotly integration?
Thank you very much
Andrea
I’m working on this very simple graph
type: custom:plotly-graph
entities:
- entity: sensor.temperatura_app_9_camera_andrea
name: temperatura
fill: tozeroy
fillcolor: rgba(244,209,96,0.3)
line:
color: rgba(244,209,96,1)
width: 2
show_value: true
type: line
hours_to_show: 6
refresh_interval: 60
autorange_after_scroll: true
layout:
showlegend: true
xaxis:
rangeselector:
'y': 1.15
buttons:
- count: 30
step: minute
- count: 1
step: hour
- count: 6
step: hour
- count: 12
step: hour
- count: 1
step: day
- count: 7
step: day
It’s not dead, another one took over development:
https://github.com/SpangleLabs/history-explorer-card
For now remove current card and manually install new one is only option, but things are looking good.
1 Like
Great news! Thank you very much!
Hi @mateine
Plotly is working great over here 
and many thanks for your continuous support for everyone!
Just a question, are you aware if there is a DatePicker component available for plotly?
Maybe I’m totally wrong and it’s something totally different, but I saw in plotly dash there is a DatePickerSingle & DatePickerRange component available:
Would be absolutely great to being able to select a specific date/range.
Thanks for your kind words 
I’m not aware of a date picker in ploylyjs, are you sure this is not just dash?
Howdy, I love this card and it is so feature rich I am getting a bit lost in its capabilities.
I am trying to get a hover template to calculate the cost of the kWh recorded on the stacked bar graph. I have a fixed cost of .092 per kWh however for some reason Cost: $%{customdata.cost} only prints literally “$%{customdata.cost}”
I know I am missing something, can you assist?
- entity: sensor.pumphouse_controller_jet_pump_energy
statistic: state
name: Jet Pump
unit_of_measurement: kWh/d
texttemplate: '%{y:.2f}'
customdata: |
$fn ({states}) =>
states.map(state => ({
cost: (parseFloat(state.state) * 0.092).toFixed(2)
}))
hovertemplate: |
$fn ({ getFromConfig }) =>
`Date: %{x}<br>
<b>${getFromConfig(".name")}</b><br>
kWh: %{y:.2f}${getFromConfig(".unit_of_measurement")}<br>
Cost: $%{customdata.cost}
<extra></extra>`
period: day
type: bar
filters:
- derivate: d
marker:
color: '#4682B4'
Happy to hear that!
Try adding formatting: %{customdata.cost:.2f}
Sadly that didn’t help.
maybe the $ symbol interferes, try adding a space before the % symbol. Also try removing the toFixed(2) so plotly does the formatting by itself (that’s what .2f does)
I am trying to overlay two y-axis: one with a value from a float sensor (positive and negative values) with a (binary) on/off-sensor.
Current result looks like this:
Expected result:
The “off” value shall be synchron to the zero-line of the float-value (left yaxis)
The “on” value shall be synchron to the maximum of the left yaxis
How can I reach this?
here the code snipped:
type: custom:plotly-graph
hours_to_show: 24
refresh_interval: 60
autorange_after_scroll: true
entities:
- entity: sensor.<float-value-in-positive-and-negative-range>
name: float - value
yaxis: 'y'
line:
color: 7f7fff
width: 1
shape: hv
fill: tonexty
- entity: binary_sensor.<on/off-value>
name: on/off - value
yaxis: y5
line:
color: 990000
width: 1
shape: hv
layout:
plot_bgcolor: rgba(0, 0, 0, 0)
paper_bgcolor: rgba(0, 0, 0, 0)
showlegend: true
dragmode: zoom
line:
width: 0
color: rgba(0, 0, 0, 0)
legend:
orientation: v
x: 1.1
'y': 0.5
xanchor: left
yanchor: middle
xaxis:
showgrid: false
width: 1
yaxis:
overlaying: false
side: left
showgrid: false
width: 1
visible: true
mirror: true
min_value: 0
title:
standoff: 25
yaxis5:
overlaying: 'y'
showgrid: false
visible: true
width: 0
mirror: true
categoryorder: array
categoryarray:
- 'off'
- 'on'
margin:
t: 5
l: 70
r: 90
b: 50
pad: 7
Hi, I used a template for a daily energy production chart that I found somewhere on the web. I have inserted my entities but the green column is showing over the other columns for each day. What should I edit to make it appear like the others?
type: custom:plotly-graph
view_layout:
grid-area: daily
entities:
- entity: sensor.solax_today_s_solar_energy
statistic: state
name: |
$fn ({ ys,meta }) =>
"Solární panely" + " 🔆 " + "(" +ys[ys.length - 1]+"kWh)"
period: day
type: bar
texttemplate: '%{y}'
filters:
- filter: i>0
marker:
color: rgb(255, 155, 48)
- entity: sensor.solax_house_load_today
statistic: state
name: |
$fn ({ ys,meta }) =>
"Spotřeba domu" + " ⚡ " + "(" +ys[ys.length - 1]+"kWh)"
period: day
type: bar
filters:
- filter: i>0
texttemplate: '%{y}'
marker:
color: rgb(55, 135, 115)
- entity: sensor.solax_today_s_import_energy
statistic: state
name: |
$fn ({ ys,meta }) =>
"Spotřeba ze sítě" + " 💡 " + "(" +ys[ys.length - 1]+"kWh)"
period: day
type: bar
texttemplate: '%{y}'
filters:
- filter: i>0
marker:
color: rgb(84, 144, 194)
- entity: sensor.solax_battery_output_energy_today
statistic: state
name: |
$fn ({ ys,meta }) =>
"Vybíjení baterie" + " 🖱️ " + "(" +ys[ys.length - 1]+"kWh)"
period: day
type: bar
texttemplate: '%{y}'
filters:
- filter: i>0
marker:
color: rgb(151, 90, 182)
- entity: sensor.solax_battery_input_energy_today
statistic: state
name: |
$fn ({ ys,meta }) =>
"Nabíjení baterie" + " 🔋 " + "(" +ys[ys.length - 1]+"kWh)"
period: day
type: bar
texttemplate: '%{y}'
filters:
- filter: i>0
marker:
color: rgb(200, 135, 225)
hours_to_show: 5d
title: Denní produkce
refresh_interval: 120
defaults:
yaxes:
fixedrange: true
layout:
legend:
bgcolor: rgba(0,0,0,0)
itemsizing: constant
font:
size: 11
height: 410
config:
displayModeBar: false
scrollZoom: false
time_offset: 12h
I doubt, that the yaml is the one, which produces the chart. In the code the is no second axis (assignment), … And if I try the code, it produces one chart in a form you are expecting to have.
You’ll either have to fix the ranges (i.e pixel coordinates) of both yaxes (see plotly docs for layout/yaxis/range) or find the max of the first entity with a filter, store it in a variable and then use that variable to map the binary sensor to be either zero or the stored max value. You’ll also have to set the yaxis of the binary sensor to the left one (yaxis: y) or set the unit_of_measurement to match.
The width of the bars is determined by the two closest datapoints in the x axis, that for each yaxis. I suggest you force the width of bars to a fixed value (you’ll have to search the plotlyjs docs)