That’s a good idea. I could consider adding a link to the error message that tells you how to correct it too
How can I make hours_to_show: dynamically show everything since a certain time/date?
You could use $ex or $fn for that, but if the start date is fixed you can also try fixing the x axis range:
layout:
xaxis:
range: $ex [Date.parse("2021-10-10T14:48:00"), new Date()]
(untested)
Is there any way to create in Plotly for Home Assistant a graph with variable colors, in Mini-graph-card it is possible thanks to color_threshold, in Plotly I don’t really know how to do it, thank you very much for your help.
In mini-graph-card it is like this:
This:
hours_to_show: $ex Math.abs((Date.now() - Date.parse("2023-02-08T10:00:00")) / 36e5)
worked. Thanks for the hint!
(just for search keywords: plotly hours_to_show, since date time)
1 Like
Re variable colors: I’ve never seen this done in plotly, it does look really nice though.
I think the only way is to make heavy use of universal functions to create a bunch of traces: doable but not easy.
I will investigate to see, I suppose that using some fn function it will be possible, it is that plotly is very powerful, I just discovered it, until now I used apexcharts that is much simpler, but I like plotly more since it is infinitely more complete.
Look at these are some plots made with Apexcharts that I have done
And this is the one I just created with plotly
They are similar although plotly is much more configurable.
Thanks.
Hey everyone, maybe someone has an idea on this one.
But first of all: big thankyou to @mateine for this card, I tried out various graph cards in the last days, and this one does not only hit the sweet spot when it comes to configurability and clean integration, but also correctly reproduces the monthly calculation of the energy dashboard without wrong calculations or offsets.
One thing I didnt figure out yet though: I’m using the delta filter to get monthly grouped gas usage bars, but once I switch the filter one, the bar for the first month where I actually recorded the usage disappears. It’s probably related to how the delta filter does the math, but I was wondering if there is a workaround for that?
With delta filter:
Without delta filter:
I’d be highly greatful for any ideads how to fix that.
edit: I think I found in the code why it behaves like it does:
delta:
() =>
({ ys, meta }) => {
const last = {
y: NaN,
};
return {
meta: {
...meta,
unit_of_measurement: `Δ${meta.unit_of_measurement}`,
},
ys: mapNumbers(ys, (y) => {
const yDelta = y - last.y;
last.y = y;
return yDelta;
}),
};
},
For the first group there simply is no “last.y”, as it’s, well, the first one. I’m not much of a coder, but could that be covered with an additonal “if this is the first, then last.y = 0”?
Oh, and just in case this is an easy one: how can I shift the bars over so that their left side starts at the beginning of the month, and not the middle of the bar lays on the first of the month? Especially when overlaying it with daily temperature values it creates a “wrong” correlation.
Thanks a lot in advance 
Nice. How do you get the icons in the legend?
Most probably only a “Char”. In Windows: Windows-key+. and then: 
1 Like
Yes, when using delta, you “lose” the first data point, because there’s nothing to compare ot with. What you can do is use time_offset to fetch a bit of the past, and then offset the data back with an fn filter.
And to offset the bars, use offset: $ex [offset in days] *24*60*60*1000. See documentation for plotly here
Oh, and yes to all you said about delta. Except that initializing lastY with 0 is equivalent to changing the first delta to the the original data point, and it will break your plot imho (the first data point will be huge).
If you still want to do it, post a question in GitHub and I’ll write you a way
Very cool! Those apex charts are very eye candy !
And yes, that’s my approach with the card: not the easiest one, but as flexible as it gets. It’s for power users 
@mateine you have an example to plot arbitrary data in the show&tell section.
Can you please explain how this should be done now that lambda is deprecated?
Posted an update in the discussion:
Hello,
I have a few questions regarding the Plotly Graph Card
-
How can I change the level of the displayed values.
For example if I want to show the power consumption only up to 600 W in the graph.
in the graph. Everything above that should be cut off. -
How can I set the basic height of the graph area.
-
Can I also set the background behind the lines/graphs?
-
How can I prevent the mouse/finger from zooming in and out of the graphs?
Hi @tomg1970!
Those are all related to plotlyjs (the underlying library that does the plotting). I suggest you google “plotlyjs how do I xyz”, you’ll definitely find the answers and it is easy to translate them to the yaml config of this card. There are a lot of examples also in the discussions section of the Plotly Graph Card too.
Here are some hints:
- that’s in layout/yaxis/range
- layout/height
- it was something like paper_bg
- config/staticPlot
Happy plotting!
Thank you for your super fast feedback.
I have been able to solve everything, only with point 4 I do not get further
Congrats!
Here is point 4 Static chart support · Issue #251 · dbuezas/lovelace-plotly-graph-card · GitHub
1 Like
Emoji in code:
name: 
Temperatura