I’m sorry if I asked this before, but I am trying to find a new chart card and was wondering if plotly allows showing of the state in the header (ideally in addition to the name).
From memory this was not possible in the past without adding a floating legend or something like that.
Yes, thanks to a recent feature. See here: GitHub - dbuezas/lovelace-plotly-graph-card: Highly customisable Lovelace card to plot interactive graphs. Brings scrolling, zooming, and much more!
1 Like
Oh, that looks cool.
I started playing with it and I am quite good at being bad in not mixing Jinja and JS, but I got it to work quite nicely.
fn: $ex vars.title = meta.friendly_name + " [" + ys[ys.length - 1] + " " + meta.unit_of_measurement + "]";
title: $ex vars.title
So show friendly name + value + unit.
Is it possible to colorize the font according to the line color? So in multi-input charts each entity can be visually assigned to the chart lines?
Good job!
I don’t think so, but you can add the value to each entity 'n name ne instead
1 Like
I will play around with this as soon as I get back from work. Just had a quick morning session .
-
I was not yet successful in combining functions with auto-entites. I would have thought that
fngoes into theinclude: - namesection and then the call goes into card options. But so far no luck. -
hours_to_showis behaving surprisingly.
I am using config-template-card to provide templates, and when I remove the template and enter e.g. ‘1.35’ the card works, but with templates it no longer acceptcs the value.
Simple example:
hours_to_show: |-
${
{ '1.35' }
}
Error: at [entities.0.on_legend_click]: 1.35 is not a valid duration. Use numbers, durations (e.g 1d) or dynamic time (e.g current_day)
Error: at [entities.0.on_legend_dblclick]: 1.35 is not a valid duration. Use numbers, durations (e.g 1d) or dynamic time (e.g current_day)
Error: at [entities.0.on_click]: 1.35 is not a valid duration. Use numbers, durations (e.g 1d) or dynamic time (e.g current_day)
Error: at [entities.0.line.color]: 1.35 is not a valid duration. Use numbers, durations (e.g 1d) or dynamic time (e.g current_day)
Error: at [entities.0.unit_of_measurement]: 1.35 is not a valid duration. Use numbers, durations (e.g 1d) or dynamic time (e.g current_day)
(the rest of the errors is not being displayed)
So the value is returned to the card but the card cannot use the value. Could this be a type problem (string, json etc.)?
- I see no impact of the color formatting. Tried with
ha_themeenabled and disabled.
The above error message did show on a red background, so the command seems to be correct. And it is my theme (dark) but not my theme (the colors are defined in my custom theme).
My theme
should be black and everything transparent, so no borders etc.
That’s a string, remove the quotes { 1.35 } or add a unit { 1.35h }.
What are you using templates for? The card will work better if you use $fn
Honestly, I am a bit more comfortable with the templates right now because I have been using them with other cards. So I already have my templates for my graph cards.
I would have to start from scratch if I changed it now.
I am always getting Jinja and Java muddled up in Home Assistant 
The above example with hours_to_show also shows that here I am stuck. Because when using templates, the value read from a helper will be a string.
It works e.g. for defining the yaxis. So why does hours_to_show only accept numerical values? (adding the “h” will not accept decimals…or maybe it is the same string issue).
Thank you.
I have started down the path of state_class and legacy sensor template.
I didn’t realize there was so much to this (but I should have).
From what I read, there is no “measurement” state_class available in the legacy sensor template format. I think that means I need to convert to a separate template.yaml.
Fixed the issue by converting the result to Number().
IS there a way of allowing zoom and scroll but have the minimum y-axis value be 0? I would like to have 0 on y-axis as the lowest value visible.
Plotly doesn’t offer that, but it can be achieved through $fn. See here Zoom limits · dbuezas/lovelace-plotly-graph-card · Discussion #233 · GitHub
The issue with mixing it with templating is that it may cause issues under certain circumstances (like flickering), but if it works for you then go for it!
Hours_to_show takes numbers, but if you pass strings it expects a unit. Why? I could invent an reason, but in truth… It’s just because
Anyway happy to hear you solved it!
Maybe I am doing something wrong, but if I use the function you posted (or autorange_after_scroll), I can no longer use the zoom function.
Use the code in the post I linked, not autorange after scroll. If it still doesn’t work, try removing the templates, they may reset constantly reset the card
I used the code without autorange.
But the zoom crosshair was not even showing.
It worked before using the code.
I can try again, if you say that it should still work 
Hi Alex, I just tried the exact code form the link in my computer and I can confirm it works fine for me (it’s a bit of a hack, it only corrects with a jump after you zoom). If you can’t get it to work, please write a Q&A post in the repository and make sure to paste your formatted yaml code and screenshots and I’ll try to assist you
1 Like
Did you, by any chance, ever find out why plotly does not format the cards anymore when config-template-card is installed (I mean installed, I am not even using it in the plotly graph)?
Or is it currently not working due to something else.
I tried deleting config-template-card and the card still remains default colors etc. despite setting custom ones.
Thanks for your awesome work to implement plotly into HA. I have successfully move a lot of my charts from Apex to Plotly. Unfortunately I am not totally happy with how the “type: bar” works as it seem to not update the bar for the current hour in real time, instead there is an empty space and updated when the hour has passed. Hopefully I’ve missed something and the error is on my side.
It’s currently raining heavy outside and the time is 10:36. As seen in the screenshot below the bar for the current hour is not shown in the graph.
I have simplified the code as follows:
type: custom:plotly-graph
time_offset: 1h
entities:
- entity: sensor.rain_hourly_h
type: bar
statistic: state
period: hour
hours_to_show: 12
refresh_interval: 10
Hey Björn,
I’m always happy to hear this thing I originally made for myself is useful for others!
In this case, the behavior comes from the fact that the statistics don’t exist until the hour has passed. It is the way Home Assistant works.
HOWEVER, you can add the current data point to the list. Bar chart of current value with midnight reset · dbuezas/lovelace-plotly-graph-card · Discussion #299 · GitHub
If you get lost, feel free to open a Q&A topic in the discussion section of the repo, and we can go into detail. This way it is easier to find for the next person
Can someone please help me recreate in Plotly this Apexcharts card?
Specifically, in Apex across the top I can see the current values and the corresponding names.
What I have in Plotly has the names and their corresponding colors across the top, and the values and the corresponding colors on the graph. Makes it a tiny bit harder to ingest the information.
Thank you!
You can add values to the names of traces, this should get you started: GitHub - dbuezas/lovelace-plotly-graph-card: Highly customisable Lovelace card to plot interactive graphs. Brings scrolling, zooming, and much more!