Thanks @mateine ! This is very close. I think the key part I’m stuck on now
is how to only show the current instantaneous bars rather than a time series.
Maybe it’s going to be something including
vars.is = ys[ys.length-1]
edit: ok, maybe I’m on the right path using
x: $ex {
and
“y”: $ex {
Could you add to the docs, what the defaults are, please? A YAMAL of what would be needed to give the same config, if raw_plotly_config was used.
Very cool plots, thanks! I’m using the plotly graph card with a HA cover device:
type: custom:plotly-graph
grid_options:
columns: 48
entities:
- entity: sensor.diff
name: Δ
line:
width: 2
yaxis: "y"
- entity: input_number.heating_offset
name: Offset
yaxis: "y"
- entity: cover.ventil
mode: markers
yaxis: y3
marker:
symbol: line-ns-open
color: blue
filters:
- filter: y === 'opening' || y === 'closing'
hours_to_show: 24
refresh_interval: 10
layout:
yaxis:
title: Δ°C
shapes:
- type: rect
layer: below
xref: paper
yref: "y"
x0: 0
x1: 1
y0: -0.5
y1: 0.5
fillcolor: green
opacity: 0.1
line:
width: 0
What I would like to achieve is that the blue lines are as wide as the duration of the valve opening or closing. Instead of marker symbols I could also use lines or rectangles. They would have to start at the opening/closing event and end at the next “open” event (“open” is HAs “stopped” on the front end, even though they internally once have it as “stopped”). How could I do that?
Epic work!
The thing that would make it double as useful for me is if the time period could be selected using the energy date selector, something like:
If you want an example, the Sankey chart does this already.
``
sxdescaluelayout: auto
energy_date_selection: true
type: custom:sankey-chart
I also think that date selector and plotly would be an ingenious combination.
The fact that you can already use historical data and automatically switch between aggregation durations based on the zoom level would make this work perfectly.
With other charting cards you would have the problem of loading too many data points when simply selecting something like month or year in the date selector.
But as switching an existing graph from 24h duration to a full year using the zoom buttons works perfectly in my tests, this would be an ideal solution. 
(In case mateine has time and passion to add this 
)
I use plotly a lot. A lot. And I just can’t get enough of it. It’s awesome. 
Here is a chart to display hourly cost of the electricity. The upper bar is price and the one below (brown) is the consumption in kWh. Unfortunately I had to convert the kWh to negative values in order to display it as in the chart.
Here you can see the chart with text inside the bars and the code to convert it to negative values:
filters: - delta - map_y_numbers: y *(-1)
Texttemplate in entity:
texttemplate: "%{y:.0f}"
Now the question - Would it be possible to display the values without the minus sign while they remain negative in the chart?
Is this the place to get help with Plotly? New HA and Plotly user, setting up some graphs right now for energy. I use Emporia Vue which brings in three data points for each sensor: 1-minute average power, 1-day total energy, and 1-month total energy.
I can’t quite tell why, but Plotly is treating the daily and monthly values (both totals in kWh) differently in the plots I’m creating which are bar charts. Some of the graphs come up with good bar widths, for multiple entities on one graph; others have required some manipulation to get them visible.
The one I’m having the greatest issue with is a monthly graph with three different entities. No matter what I do, I can’t prevent it from creating a stacked graph - I want the bars to be grouped side-by-side. I’ve tried a few things - barmode, offsetgroup, etc. But nothing changes. Any help would be appreciated. Thanks!
type: custom:plotly-graph
layout:
yaxis:
fixedrange: true
barmode: group
config:
scrollZoom: false
defaults:
entity:
texttemplate: " %{y:.1f}"
width: $fn() => 1000*60*60*24*31*0.75/3
entities:
- entity: sensor.heat_pump_garage_energy_this_month
type: bar
statistic: state
period: month
offsetgroup: 1
- entity: sensor.heat_pump_sunroom_energy_this_month
type: bar
statistic: state
period: month
offsetgroup: 2
- entity: sensor.heat_pump_office_energy_this_month
type: bar
statistic: state
period: month
offsetgroup: 3
hours_to_show: 6M
refresh_interval: 10
grid_options:
columns: 24
rows: 5
title: Monthly
Hello everybody. Today I discovered this card that has some features I was looking for… However, I would like to ask three things:
1- Is it possible for the value to be outside the graph?
2 - Can the bars have more rounded corners? to give a more “modern” look?
3 - Regarding the color of the bars, is it possible to apply a gradient? Any color mix? As in the example picture of “custom:chartjs-card”
Thanks
1:
title: Últimos 7 dias
entities:
- entity: sensor.energy_shelly_em_casa_today
unit_of_measurement: kWh
texttemplate: "%{y:.1f}"
showlegend: true
type: bar
textfont:
size: 16
color: white
statistic: sum
period: day
marker:
color: "#CD0033"
filters:
- delta
hours_to_show: 7d
refresh_interval: 10
layout:
showlegend: false
xaxis:
nticks: 8
showgrid: false
height: 310
margin:
t: 20
2 and 3:
type: entities
title: Consumo energético (últimos 12 meses)
entities:
- type: custom:chartjs-card
chart: bar
entity_row: true
data:
datasets:
- backgroundColor: >-
${ c => {var bg = c.chart.ctx.createLinearGradient(0,0,0,600);
bg.addColorStop(0, "lightgreen"); bg.addColorStop(1, "blue"); return
bg;} }
borderColor: >-
${ c => {var bg = c.chart.ctx.createLinearGradient(0,0,0,600);
bg.addColorStop(0, "lightgreen"); bg.addColorStop(1, "blue"); return
bg;} }
borderWidth: 1
borderRadius: 2
data: ${states["sensor.energy_last_12_months"].attributes.data}
strokeColor: "#79D1CF"
fillColor: "#79D1CF"
label: Eletricidade
labels: ${states["sensor.energy_last_12_months"].attributes.labels}
options:
scales:
yAxes:
- ticks:
beginAtZero: true
plugins:
title:
display: true
text: >-
${"📅 Mês Anterior: " +
states["sensor.energy_total_mes_anterior"].state + " kWh
| 📅 Mês Corrente " +
states["sensor.energy_shelly_em_casa_monthly_total"].state + " kWh"
}
custom_options:
showLegend: false
For text to be outside the bar, under entity:
entity: textposition: inside textangle: -270 # you can enter any angle you want
For rounded corners, under layout enter the following:
layout: barcornerradius: 5 bargap: 0.03 # gap between bars
Thank you friend. That’s exactly it! Regarding the gradient in colors? will it be possible to do?
Something like that?
backgroundColor: >-
${ c => {var bg = c.chart.ctx.createLinearGradient(0,0,0,600);
bg.addColorStop(0, "red"); bg.addColorStop(1, "blue"); return bg;} }
Which results in this color:
I don’t think you can do that in ploty. In the repo theres a link to an image index of thing people made, you can look there
Plotting waste bins lifts where the data is scraped. The sensor has the lift weigth and then the date it was lifted is an attribute of the sensor.
Trying to plot these as a bar graph and while the weights are correct, I have an issue with the date defaulting to 1/1/1970 which means there is an issue in the config of how I am trying to use the date attribute of the sensor.
Below is my config - any advice appreciated on how to resolve.
- type: custom:plotly-graph
title: Waste Lifts
entities:
- entity: sensor.waste_lifts
name: Waste
type: bar
x: "{{ as_timestamp(state_attr('sensor.waste_lifts', 'date')) | timestamp_local}}"
- entity: sensor.recycling_lifts
name: Recycling
type: bar
x: "{{ as_timestamp(state_attr('sensor.recycling_lifts', 'date')) | timestamp_local}}"
- entity: sensor.compost_lifts
name: Compost
type: bar
x: "{{ as_timestamp(state_attr('sensor.compost_lifts', 'date')) | timestamp_local}}"
refresh_interval: 3600
layout:
barmode: group
yaxis:
title: Weight (kg) or paste code here
The issue you have is that you are trying to use jinja templates, you’ll need to read the docs of this card in the repo
HI all,
Still experimenting with Plotly for some charts on my dashboard.
I have a situation where I want to pan left<>right along the x-axis, and I want the y-axis to auto-range as I do so. In this particular case, I’d like it to show a week’s worth of daily data at a time.
It’s been working fine until it accumulated about a week’s worth of data. The chart is now stacking some of the left-most points together as the data scrolls. It’s forcing in an 8th day’s data on a 7-day graph.
Not sure why it’s doing this; can anyone help?
Thanks!
type: custom:plotly-graph
disable_pinch_to_zoom: true
autorange_after_scroll: true
layout:
yaxis:
fixedrange: true
config:
scrollZoom: false
displayModeBar: false
entities:
- entity: sensor.total_energy_cost_today
type: bar
statistic: state
period: day
texttemplate: "%{y}"
width: $fn () => 1000*60*60*24*0.75
hours_to_show: 7d
refresh_interval: 10
grid_options:
columns: 24
rows: 5
title: Daily Cost
How do I get the values displayed with 2 decimal places?
sensor.server_daily is a sensor in kWh/day
type: custom:apexcharts-card
graph_span: 7d
update_interval: 5min
show:
last_updated: true
span:
end: day
header:
show: true
title: Server daily kWh
now:
show: true
color: red
label: Now
apex_config:
chart:
type: area
height: 250
stroke:
show: true
width: 1
curve: smooth
legend:
show: true
dataLabels:
enabled: true
offsetY: -10
fill:
type: gradient
gradient:
shadeIntensity: 0.2
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 80
- 100
series:
- color: rgb(51, 102, 255)
entity: sensor.server_daily
type: column
group_by:
func: max
duration: 24h
show:
datalabels: true
for decimal numbers you can try to use texttemplate: “%{y:.2f}”
Try the following:
- entity: sensor.electriciteit_verbruik_dag
type: bar
statistic: state
period: day
texttemplate: "%{y}"
width: $fn () => 1000*60*60*24*0.75
filters:
- filter: i>0
and (optional) to align the bars a bit better:
layout:
xaxis:
showgrid: false
autorange: true
You are using custom:apexcharts-card this example is for plotly type: custom:plotly-graph.
Oh sorry wrong code. Keinerlei Inhalt bei der plotly card.
First screenshot is apex and second plotly
Have i errors?
type: custom:plotly-graph
title: Server daily
disable_pinch_to_zoom: true
autorange_after_scroll: true
layout:
yaxis:
fixedrange: true
config:
scrollZoom: true
displayModeBar: true
entities:
- entity: sensor.server_daily
type: bar
statistic: state
period: day
texttemplate: “%{y:.2f}”
hours_to_show: 7d
refresh_interval: 60