Thanks!
Plotly is really amazing.
To control the modbar, you need to pass params to the config key, just add
config:
displayModeBar: false
There’s more here: Configuration options with JavaScript
The config key is what’s passed as third parameter in plotly’s examples
Have fun!
By the way, you can define the lambdas inside defaults/entity to avoid repeating it in all entities
Thanks, I guess I can also pass the config function to just remove certain buttons:
modeBarButtonsToRemove:
- pan2d
- [other commands found here: https://plotly.com/javascript/configuration-options/]
in addition to:
displayModeBar: false
Thanks, I updated the comment as well so others don’t bloat their yamls like I did.
Another thing I noticed is a delay in certain entity updates. Not sure if my code above limits the update frequency due to the spline calculations but I’ve for example seen one entity that I know have updated itself later than what shows on the graph. Tried removing the spline function and that brings it up to speed.
Hey Swipee, that’s actually quite weird. I don’t think splines anything to do with it to be honest.
Could you try the beta version 1.3.0 and let me know if that fixes it? (go to HACS, frontend, Plotly Graph Card, three dots, redownload, check “show beta versions” and pick 1.3.0)
I fixed how the updated data is merged with the existing one.
Also, please add both charts (with and without spline) at the same time in two different cards to make sure this is related to the splines and not just a sensor that went unavailable for some time.
Cheers!
It seems long term statistics are not used by plotly.
Any clue how to achieve that?
Hi . I like this card very much. Have used plotly in the past so this is a useful integration to HASS.
I have been looking for an example that uses multiple y axes and how to assign entities to different y axes. Sometmes this happens automatically sometimes it doesnt. I want to force an entity to a particular y axis. Any ideas ?
Just answered my own question after i found this post Heatpump data with multiple axes and end value · Discussion #17 · dbuezas/lovelace-plotly-graph-card · GitHub .about multiple axes.
so for others , this forces an axis to the RHS
type: custom:plotly-graph
entities:
- entity: sensor.pvtotal
- entity: sensor.pvdaytotal
yaxis: y2
hours_to_show: 24
refresh_interval: 10
layout:
yaxis2:
mirroraxis: true
fixedrange: true
range:
- 0
- 10
Is there an option to hide the Y axis ?
Yes, the card automatically adds yaxes for each different unit_of_measurement in the entities you pass.
You can override the unit_of_measurement and also the yaxis yourself
To hide an axis:
layout:
yaxis:
visible: false
Pro tip: google “hide yaxis plotly.js”
Most of the api goes directly to plotly.
Love the card! I’m currently trying to build a plot based on the weather forecast. For this, I need to access a nested attribute like shown below. Is this possible? What can I do to make it work?
This is what the attributes from the weatherflow forecast are looking like:
temperature: 21.7
humidity: 32
pressure: 1019.2
wind_bearing: 131
wind_speed: 9
visibility: 40.2
attribution: Powered by WeatherFlow
friendly_name: Weatherflow Hourly based Forecast
forecast:
- datetime: '2022-06-02T14:00:00+00:00'
temperature: 22
precipitation: 0
precipitation_probability: 0
condition: partlycloudy
wind_speed: 7.2
wind_gust: 7.2
wind_bearing: 29
feels_like: 22
uv_index: 4
- datetime: '2022-06-02T15:00:00+00:00'
temperature: 22
precipitation: 0
precipitation_probability: 0
condition: partlycloudy
wind_speed: 7.2
wind_gust: 7.2
wind_bearing: 39
feels_like: 22
uv_index: 3
- datetime: '2022-06-02T16:00:00+00:00'
temperature: 22
precipitation: 0
...
I wand to access the data in the forecast attribute like here in ApexCharts :
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.temperature];
});
However, the “forecast” attribute seems to be not available in the plotly graph card.
As the code below shows, it is missing from the attribute’s keys:
type: custom:plotly-graph
entities:
- entity: weather.weatherflow_hourly_based_forecast
lambda: |-
(ys, xs, entity) => {
var attributes = new Map(Object.entries(entity[10].attributes));
return ({x: xs, y: Array.from(attributes.keys())})
}
Interesting, I’ve never seen nested attributes.
Would you put this in the discussions in github instead?
We can go back and forth much easier there 
In principle it should work just fine so this may be a fixable bug or we may be missing something in the lambda.
Btw: you can use console.log in lambdas, the logs are in the browser dev console. You can even use breakpoints
First off, thank you, this is exactly what I was looking for! (almost 
)
Just discovered it this morning when looking to try and get a little more functionality into mini-graph-card, and came across this which would display the plots so much better and closer to what I want.
Ran into a little issue, been searching a couple hours to see if its common or a faq without luck, maybe you can point me in the right direction?
So I have a dashboard with a vertical stack, each stack has horizontal stacks of cards, a fairly typical grid/item layout.
Using mini-graph-cards one of the horizontal stacks has 3 graphs in it which display without issue.
Trying to recreate it with plotly if there’s only one graph in the stack it works fine, but as soon as I add a second it starts resizing constantly.
I can reproduce it also by just adding a new card, then a horizontal stack, then add a custom plotly graph card and its fine (the default with just sun entity), add a second plotly graph to the same horizontal stack and it also starts scaling over and over:
type: horizontal-stack
cards:
- type: custom:plotly-graph
entities:
- entity: sun.sun
hours_to_show: 24
refresh_interval: 10
- type: custom:plotly-graph
entities:
- entity: sun.sun
hours_to_show: 24
refresh_interval: 10
I’ve tried adding:
layout:
height: 200
to each but they still start off much taller, then slowly shrink down to the fixed height.
Tried to catch the limits of each, snips taken a couple of seconds apart:
I’m probably missing something simple here, but can’t seem to figure out what lol, any assistance/advice?
Happy to hear it is of use!
There’s no FAQ, but the discussions section in the repository is fairly rich.
This is probably a bug, I’m doing something a bit dodgy to make the cards responsive and the horizontal card probably hit a corner case I didn’t consider.
Feel free to report an issue in the repository with this, but until I fix this, I recommend you check out grids:
This allows you to have one card with multiple subplots that can even share axes
‘unknown’ states messes up my graphs. How can I make plotly show a fixed value like 0 or 1 instead of unknown?
To filter values, see here:
You may want to check out the other discussions too, there are a lot of tricks there
Is it possible to set a line color to a theme variable or use variables in color schemes?
I’m obviously missing something really obvious, but do you have a bar chart example?
