Understood on duplicating entries.
How do I make a legendgroup selector (to toggle)?
Just click on the legend at the top of the plot. The name of the trace
I’m not understanding.
What does the code line:
“legendgroup:”
do?
type: custom:plotly-graph
title: 255 Real Time
defaults:
entity:
show_value: true
entities:
- entity: sensor.255_panel_2_123_123_1min
name: 255 Total group 1 by 5minute '
yaxis: y1
line:
color: red
period: 5minute
legendgoup: 1
- entity: sensor.1st_floor_energy_current
name: |
$ex meta.friendly_name + " " + ys[ys.length - 1]
yaxis: y1
line:
color: purple
period: 5minute
legendgoup: 1
- entity: sensor.255_panel_2_5_2nd_flr_5_1min
name: 2nd flr 5
yaxis: y1
line:
color: purple
period: 5minute
legendgoup: 1
- entity: sensor.255_panel_2_6_2nd_flr_6_1min
name: 2nd flr 6
yaxis: y1
line:
color: purple
period: 5minute
legendgoup: 1
- entity: sensor.3rd_floor_energy_current
name: |
$ex "LG 3rd Floor Energy " + ys[ys.length - 1]
yaxis: y1
line:
color: orange
period: 5minute
legendgoup: 1
- entity: sensor.manor_panel_2_255_balance_1min
name: Balance
yaxis: y1
line:
color: majenta
period: 5minute
legendgoup: 1
- entity: sensor.1st_floor_room_temperature
name: |
$ex meta.friendly_name + " " + ys[ys.length - 1]
yaxis: y2
line:
color: blue
period: 5minute
legendgoup: 1
- entity: sensor.2nd_floor_east_room_temperature
name: |
$ex "LG 2nd Fl East " + ys[ys.length - 1]
yaxis: y2
line:
color: purple
period: 5minute
legendgoup: 1
- entity: sensor.2nd_floor_west_room_temperature
name: |
$ex "LG 2nd Fl West " + ys[ys.length - 1]
yaxis: y2
line:
color: purple
period: 5minute
legendgoup: 1
- entity: sensor.3rd_floor_room_temperature
name: |
$ex "LG 3rd floor " + ys[ys.length - 1]
yaxis: y2
line:
color: orange
period: 5minute
legendgoup: 1
- entity: sensor.sonoff_thr316_255_basement_1001dac0ed_temperature
name: |
$ex "Basement " + ys[ys.length - 1]
yaxis: y2
line:
color: blue
period: 5minute
legendgoup: 1
- entity: sensor.255_panel_2_123_123_1min
name: 255 Total group 2 by hour
yaxis: y1
line:
color: blue
period: hour
legendgoup: 2
- entity: sensor.1st_floor_energy_current
name: |
$ex meta.friendly_name + " " + ys[ys.length - 1]
yaxis: y1
line:
color: purple
period: hour
legendgoup: 2
- entity: sensor.255_panel_2_5_2nd_flr_5_1min
name: 2nd flr 5
yaxis: y1
line:
color: purple
period: hour
legendgoup: 2
- entity: sensor.255_panel_2_6_2nd_flr_6_1min
name: 2nd flr 6
yaxis: y1
line:
color: purple
period: hour
legendgoup: 2
- entity: sensor.3rd_floor_energy_current
name: |
$ex "LG 3rd Floor Energy " + ys[ys.length - 1]
yaxis: y1
line:
color: orange
period: hour
legendgoup: 2
- entity: sensor.manor_panel_2_255_balance_1min
name: Balance
yaxis: y1
line:
color: majenta
period: hour
legendgoup: 2
- entity: sensor.1st_floor_room_temperature
name: |
$ex meta.friendly_name + " " + ys[ys.length - 1]
yaxis: y2
line:
color: blue
period: hour
legendgoup: 2
- entity: sensor.2nd_floor_east_room_temperature
name: |
$ex "LG 2nd Fl East " + ys[ys.length - 1]
yaxis: y2
line:
color: purple
period: hour
legendgoup: 2
- entity: sensor.2nd_floor_west_room_temperature
name: |
$ex "LG 2nd Fl West " + ys[ys.length - 1]
yaxis: y2
line:
color: purple
period: hour
legendgoup: 2
- entity: sensor.3rd_floor_room_temperature
name: |
$ex "LG 3rd floor " + ys[ys.length - 1]
yaxis: y2
line:
color: orange
period: hour
legendgoup: 2
- entity: sensor.sonoff_thr316_255_basement_1001dac0ed_temperature
name: |
$ex "Basement " + ys[ys.length - 1]
yaxis: y2
line:
color: blue
period: hour
legendgoup: 2
layout:
height: 600
xaxis:
rangeselector:
'y': 2.6
buttons:
- count: 1
step: hour
- count: 24
step: hour
- count: 3
step: day
yaxis:
fixedrange: true
range:
- 1
- 8000
yaxis2:
fixedrange: true
range:
- 10
- 80
refresh_interval: 60
hours_to_show: 1
See here: Scatter traces in JavaScript
Each legendgroup gets a single legend (trace title). If you group all in two groups, you can show/hide each group in one click
Is it possible to center the x-axis labels to the columns in a bar diagram?
Also is possible to change the x-axis labels?
Using this code
type: custom:plotly-graph
title: Månadens energiförbrukning
entities:
- entity: sensor.monthly_net_consumption_hem
unit_of_measurement: kWh
texttemplate: '%{y:.0f} '
type: bar
statistic: sum
period: month
hovertemplate: ''
offset: 15
filters:
- delta
hours_to_show: 12M
refresh_interval: 10
I have a simple sum daily bar graph. How can I add a vertical line for every Sunday 23:59h?
Here is the beginning of my code:
type: custom:plotly-graph
entities:
- entity: sensor.watermeter_value
statistic: sum
period:
24h: hour
7d: day
4M: month
type: bar
texttemplate: '%{y}'
hovertemplate: '%{y}<br>%{x|%Y %B %d}<br>%{x|%A}<extra></extra> '
textfont:
size: 22
color: white
marker:
color: rgba(165,165,0,0.6)
filters:
- delta
The buttons are working perfectly for 1y/1m/1w/1d/12h/1h.
But is there any way to add a “current_day” button (Dynamic Relative Time)?
See the “now line” in the repo
You’ll have to do that yourself. You can find the math and js functions here: Show the current day from midnight to midnight · dbuezas/lovelace-plotly-graph-card · Discussion #220 · GitHub
I want to output a number of temperature- and humidity-sensors grouped by their respective room and connect the graph so that scrolling the graph from one room the others will follows.
What am I doing wrong when the result looks like this:
type: custom:plotly-graph
entities:
- entity: sensor.particle10_bme680_temperature
yaxis: 'y'
- entity: sensor.particle10_bme680_humidity
yaxis: y2
- entity: sensor.particle5_outside_bme680_temperature
yaxis: y3
- entity: sensor.particle5_outside_bme680_humidity
yaxis: y4
layout:
dragmode: pan
margin:
t: 30
l: 45
r: 40
b: 50
height: 500
grid:
rows: 2
columns: 1
yaxis:
overlaying: false
side: left
title:
text: Temperature
yaxis2:
overlaying: 'y'
side: right
title:
text: Humidity
yaxis3:
overlaying: false
side: left
title:
text: Temperature
yaxis4:
overlaying: y3
side: right
title:
text: Humidity
defaults:
yaxes:
side: left
overlaying: 'y'
visible: true
showgrid: false
xaxes:
showgrid: false
hours_to_show: 3h
color_scheme: 1
If I change grid rows from 2 to 3 it looks better but I’m not totally keen about the empty slot in the middle:
grid:
rows: 3
columns: 1
2 rows instead of 3?
Yes, I want them on 2 graphs instead of 3 and still be able to have temperature and humidity in the same graph (by using overlaying I guess).
Hi,
I am really interested in using this card to produce a density histogram like that shown in your examples. I am struggling to find example code though and specifying plotly graph type ‘density_heatmap’ does not seem to work. I am probably missing something basic!
I have a variable electricity tariff and I would like to plot daily cost against use in the form of a histogram. As time goes on I expect most days to follow a straight line but some will be above and some below.
The following is code I have to do a 2d scatter, but I would like the heatmap/density map effect.
type: custom:plotly-graph
entities:
- entity: >-
sensor.octopus_energy_electricity_22l3941221_2000011182918_previous_accumulative_cost
internal: true
filters:
- resample: 1d
fn: $fn ({ xs, ys, vars }) => { vars.cost = ys; vars.xs = xs; }
- entity: >-
sensor.octopus_energy_electricity_22l3941221_2000011182918_previous_accumulative_consumption
internal: true
filters:
- resample: 1d
fn: $fn ({ ys, vars }) => vars.usage = ys
- entity: ''
x: $fn ({ vars }) => vars.cost
'y': $fn ({ vars }) => vars.usage
mode: density_heatmap
marker:
size: 7
line:
color: rgba(50, 50, 217, 0.5)
width: 3
opacity: 0.8
hours_to_show: 3600
raw_plotly_config: true
layout:
margin: null
scene:
xaxis:
title: cost
yaxis:
title: usage
Then write rows: 2 instead of 3
If it was that easy I wouldn’t have posted the question. There are yaxis1-4 in the code and with overlays that mess up the rows.
Then I don’t know, I suggest you search forums for plotly itself
Here’s how I solved it:
layout:
xaxis:
type: date
tickmode: linear
dtick: M2
tick0: '1999-01-13'
tickformat: '%b %y'
You can format the axis labels:
layout:
xaxis:
type: date
tickmode: linear
dtick: M1
tick0: '1999-01-13'
tickformat: '<b>%b</b><br>%Y'
griddash: solid
gridcolor: rgb(25,25,25)
Lycka till 
2 Likes
This might sound like a weird question perhaps, but is there a way of having the x-axis show values of importance, ie only where there is a “hit”. Let’s say I have this chart where I visualize when a certain door has been opened. I am not interested in seeing time stamps other than when the door was opened.