I think there may be, google for plotly axis ticks
Hello,
I love this Plotly Graph. Thanks for sharing.
Now to my problem. I try to build a graph with tipper electric prices now and future. No problem there I found it in Github.
But now I want to add the wind forecast for the windpark and try to figure out or guess the future prices more than one day forecast 
How do I need to change the yaml to see one day past prices, future prices tibber and then 3 days future wind.
type: custom:plotly-graph
time_offset: 96h
refresh_interval: 300
hours_to_show: 144
layout:
showlegend: true
height: 300
legend:
x: 0
'y': 1
bgcolor: rgba(0,0,0,0)
orientation: h
itemsizing: constant
font:
size: 12
yaxis:
rangemode: tozero
tickformat: .1f
yaxis2:
rangemode: tozero
tickformat: .0f
range:
- 20
- 100
fixrange: true
yaxis9:
visible: false
fixedrange: true
round: 2
entities:
- entity: sensor.electricity_price_zuhause
fill: tozeroy
fillcolor: rgba(62, 138, 0,.1)
unit_of_measurement: Eur/kWh
line:
color: rgba(255, 165, 0, 1)
width: 2
filters:
- store_var: electricity_price
- exponential_moving_average:
alpha: 1
show_value: true
texttemplate: ' %{y:.2f} Eur/kWh'
- entity: sensor.tibber_prices
name: Future price
fill: tozeroy
fillcolor: rgba(255, 165, 0,.1)
line:
color: rgba(255, 165, 0, 1)
width: 1
dash: dot
filters:
- fn: |-
({ meta, vars }) => ({
xs: [vars.electricity_price.xs.slice(-1)[0],...meta.today.map(({ startsAt }) => new Date(startsAt))],
ys: [vars.electricity_price.ys.slice(-1)[0],...meta.today.map(({ total }) => total)],
xs: [vars.electricity_price.xs.slice(-1)[0],...meta.tomorrow.map(({ startsAt }) => new Date(startsAt))],
ys: [vars.electricity_price.ys.slice(-1)[0],...meta.tomorrow.map(({ total }) => total)],
})
- exponential_moving_average:
alpha: 1
- entity: ''
name: Now
yaxis: y9
showlegend: false
line:
width: 2
dash: dot
color: blue
x: $fn () => [Date.now(), Date.now()]
'y': $fn () => [0,1]
- entity: sensor.wind_nordsee_forecast_wind_speed_2
name: Windgeschwindigkeit
yaxis: y2
fillcolor: rgba(31, 119, 180,.6)
line:
color: rgba(31, 119, 180, 1)
legendgroup: 1
filters:
- store_var: wind
fill: tozeroy
- entity: weather.nordsee
yaxis: y2
legendgroup: 1
showlegend: false
fill: tozeroy
fillcolor: rgba(31, 119, 180,.2)
line:
color: rgba(31, 119, 180, 1)
width: 2
shape: spline
unit_of_measurement: km/h
filters:
- fn: |-
({ meta, vars }) => ({
xs: [vars.wind.xs.slice(-1)[0],...meta.forecast.map(({ datetime }) => new Date(datetime))],
ys: [vars.wind.ys.slice(-1)[0],...meta.forecast.map(({ wind_speed }) => wind_speed)],
})
- exponential_moving_average:
alpha: 1
config:
scrollZoom: true
displayModeBar: false
staticPlot: false
Now it s more random and not working for the prices for today from tibber (not shown in the graph, why?)
You want so see 4 days in total so:
hours_to_show: 4d
And you want want to see 3 days into the future, so:
time_offset: 3d
Ok, thanks that helps a bit 
Now how to change this:
filters:
- fn: |-
({ meta, vars }) => ({
xs: [vars.wind.xs.slice(-1)[0],...meta.forecast.map(({ datetime }) => new Date(datetime))],
ys: [vars.wind.ys.slice(-1)[0],...meta.forecast.map(({ wind_speed }) => wind_speed)],
})
To only get 3d in future and not all of the future informations.
Thanks a lot.
Oh I see. You can add another filter
filters:
- ......
- filter: "x < Date.now() + 1000 * 60 * 60 * 24 * 3"Cool. Thanks
Now its almost perfekt
One thing more. Is it possible to change the color of the text (Price) and change the place of the speed information on the right?
Also there is a gab between the start of the windspeed and the now? But possible that I made an error with my current wind data? Found the error…no longer an issue.
To change the anchor of the text try textposition Scatter traces in JavaScript
For the color, I don’t know, search in the link above. Maybe markercolor.
Alternatively, increase the time_offset a bit so there’s more space for the text, or put the price inside a text annotation Text and annotations in JavaScript
Hi there! I’m trying to move over from Apex Charts to Plotly. I’m trying to reconstruct some electricity price charts I had going to see the price of today’s and tomorrow’s electricity per hour (based on the Nordpool integration: GitHub - custom-components/nordpool: This component allows you to pull in the energy prices into Home-Assistant.). However, I’m having some trouble.
The attribute ‘Raw today’ has the correct price for each hour between 00:00 and 24:00. From reading the docs, I believe I should be using filters and the -fn option to extract the x- and y-axis values from the ‘Raw today’ attribute. However, this is where I must confess I am not savvy enough to figure out the function myself. Any help would be appreciated! Thanks in advance
The earlier code to extract the values used in Apex Charts was:
- entity: sensor.nordpool_kwh_fi_eur_3_10_024
type: column
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
Indeed, and you can reuse most of the function too, but I’ll try to simplify it a bit.
** Update: this is wrong. Answer below**
entities:
- entity: sensor.nordpool_kwh_fi_eur_3_10_024
attribute: raw_today
filters:
- map_x: ys.map(({ start }) => new Date(start))
- map_y: ys.map(({ value }) => value)
I’m on my phone so I can’t test it, let me know if it doesn’t work
Oh right, I misread the data format. This may be more like it:
entities:
- entity: sensor.nordpool_kwh_fi_eur_3_10_024
filters:
- fn: |
({meta}) => ({
xs: meta.raw_today.map(({ start }) => new Date(start)),
ys: meta.raw_today.map(({ value }) => value),
})
1 Like
Thank you very much, it appears to work now!
Hi,
In relation to Plotly interactive Graph Card - #526 by MaxJoseph
I think I need to format my data as a 2D array, but I am not sure how to figure a filter to achieve this.
Thanks,
Max
Thanks. Really appreaciate this. Keep on the good work and have a nice 2024.
btw: is this the correct code for the pic?
1 Like
Thanks! You too!
I think the previous answer applies to your question too
Thank you for this add-on.
I’ve got a few noob questions. I’ve gone through all the documentation but can’t seem to understand things… I’m finding it a bit overwhelming.
#1 I have a basic line graph with the following YAML:
type: custom:plotly-graph
entities:
- entity: sensor.solar_wind_phi_angle
hours_to_show: 72
refresh_interval: 10
logarithmic_scale: false
defaults:
entity:
fill: tozeroy
“sensor.solar_wind_phi_angle” is just a angular (degrees) value between 0 and 360.
Is it possible to colour any parts of the line with values between 0 and 219 in red, and between 220 and 360 as blue?
Alternatively, I could use the “fill: tozeroy”, if I can just specify 220 as the value instead of zero y. Is this possible? e.g. “fill: to220y”?
#2. I don’t understand how to use any of the other types of display options. For example, the histogram in your comment a few days ago.
I read the sample code provided, and simply changed the three sensors to my own pressure/temp/humidity sensors. However, I get a “no type provided” error when I try to enter it into the card configuration, despite line 19 containing “type: histogram2dcontour”. I am unable to click the save button as it is greyed out at this point.
Could you please explain how I can use the other graph types?
#3. The top of your Github post shows a number of example plot types, such as the 3D line graph of humidity, temperature, and pressure. Do these have specific names? Is there a list of all “type” options somewhere?
#4 - I note the “hours_to_show” option (I have set 72 hours on the above example). This, of course, only loads the last 72 hours of data into the plot. Is it possible to load more data (preferably, all the data stored by Home Assistant for that sensor), but set a default display range (e.g. display the last 2 hours to begin with and allow the user to then zoom out to see earlier data)?
#5 - Is it possible to manually specify the range of the Y axis? I have a sensor that has only been running for the last 24 hours, and the value of that sensor has been hovering around 350. However, based on previous sensors, I expect it will have values between 250 and 900. Right now, the graph loads with a y-axis range of 330-370. However, these values can be considered low for this specific sensor, so it isn’t intuitive having the y-axis restricted like this. Having it manually set to e.g. 250-900 would allow me to intuitively see that the line is in the lower range (when the readings are around 350, as they are now).
Thank you in advance for your help.
Hi there @DaveTSG !
Unfortunately no. Plotly doesn’t support it as far as I know. I think apex charts does.
Only through workarounds using the same entity multiple times with different time_offset, storing them in vars and processing them via filters.
Yes, google “set y axis range in plotly”.
See Plotly javascript graphing library in JavaScript
You could add a transparent entity with a constant value of 220 and use fill: tonexty
I feel you, the price of flexibility is a steep learning curve. Try googling “how to x with plotlyjs” and navigate around in the Discussions section of this card’s repo.
For specific things, you can open a new q&a topic in the repo and get help there
Hello everyone
Happy new year.
, I would re
I really don’t understand the logic behind filters.
If somebody could give me a hint, I would reaaly appreciate.
in a graph, I want to show the power but limited to the value of the temperature if the power is above 100.
I’ve tried the following syntax w/o success.
What should I modify ?*
Many thanks
- entity: sensor.parents_power
name: Power
yaxis: y1
fill: tozeroy
filters:
- map_y: 'state.state > 100 ? sensor.parents_temperature : 0'
line:
color: blue
width: 0.2