Yep. Done that.
OK did I do something wrong here?
- type: custom:apexcharts-card
graph_span: 48h
header:
show: true
title: Rain Today
apex_config:
stroke:
width: 3
curve: smooth
chart:
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: true
zoomout: true
pan: true
reset: true
series:
- entity: sensor.gosford_rain_since_9am
name: Rain since 9am
type: line
group_by:
func: avg
duration: 12min
- type: custom:apexcharts-card
graph_span: 48h
header:
show: true
title: Air Pressure
apex_config:
stroke:
width: 3
curve: smooth
chart:
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: true
zoomout: true
pan: true
reset: true
series:
- entity: sensor.nodemcu_lounge_bme280_pressure
name: Lounge Pressure
type: line
group_by:
func: avg
duration: 12min
- entity: sensor.nodemcu_lounge_bme280_seapressure
name: Sea Pressure
type: line
group_by:
func: avg
duration: 12min
- entity: sensor.nodemcu_bedroom_bme280_pressure
name: Bedroom Pressure
type: line
group_by:
func: avg
duration: 12min
The Rain today doesn’t pront a legend down the bottom but the sea pressure does. Is this because it’s only got one entity?
1 entity = no legend by default.
To force it:
apex_config:
legend:
showForSingleSeries: true
1 Like
FYI:
Seems to do a pretty good job of giving you full screen width charts. And seems to adapt fine on iOS app both in portrait and landscape modes.
title: T09 Sensors
panel: true
cards:
- type: vertical-stack
Actually, since I noticed the style bug, I’ve moved to my testing environment where it is used as a simple card, no picture element, nothing fancy, only the above config.
This is what’s showing:
This has to be my new favourite card - knocked this up in about 15 minutes this evening:
Combines the Amber Electric historic electricity price with the predicted price
Code for those interested
- type: custom:apexcharts-card
graph_span: 59h
header:
show: true
title: "Amber Price Prediction (General Usage - E1)"
span:
start: hour
offset: -1d
apex_config:
chart: { type: "area", height: 300 }
stroke: { show: true, width: 3, curve: smooth }
legend: { show: false }
dataLabels: { enabled: false }
xaxis:
{
type: "datetime",
labels: { datetimeFormatter: { month: "ddd", day: "ddd" } },
}
fill:
{
type: "gradient",
gradient:
{
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100],
},
}
series:
- entity: sensor.amber_general_usage_price
name: Predicted Price
type: area
# color: "#008FFB"
extend_to_end: false
data_generator: |
return entity.attributes.price_forcecast.map((entry) => {
return [new Date(entry.pricing_period), entry.price];
});
- entity: sensor.amber_general_usage_price
name: Historic Price
type: area
extend_to_end: false
- type: custom:apexcharts-card
graph_span: 59h
header:
show: true
title: "Amber Price Prediction (Solar Feed-In)"
span:
start: hour
offset: -1d
apex_config:
chart: { type: "area", height: 300 }
stroke: { show: true, width: 3, curve: smooth }
legend: { show: false }
dataLabels: { enabled: false }
xaxis:
{
type: "datetime",
labels: { datetimeFormatter: { month: "ddd", day: "ddd" } },
}
fill:
{
type: "gradient",
gradient:
{
shadeIntensity: 1,
inverseColors: true,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100],
},
}
series:
- entity: sensor.amber_solar_feed_in_tariff
name: Predicted Price
type: area
# color: "#008FFB"
extend_to_end: false
data_generator: |
return entity.attributes.price_forcecast.map((entry) => {
return [new Date(entry.pricing_period), entry.price];
});
- entity: sensor.amber_solar_feed_in_tariff
name: Historic Price
type: area
extend_to_end: false
17 Likes
Yeah I love it but I bow in your presence… Great use.
1 Like
Please share your timezone, config and full dev-tools entry of the weather entity. We’ll make this work 
1 Like
csv
Sure. Timezone is Europe/Zurich, the openweathermap is configured via the frontend, as seen here.
Here’s the full dev tools output of the state attributes:
temperature: 7.2
humidity: 85
pressure: 1011
wind_bearing: 212
wind_speed: 6.44
attribution: Data provided by OpenWeatherMap
forecast:
- datetime: '2021-01-29T11:00:00+00:00'
precipitation: 24
wind_speed: 7.21
wind_bearing: 227
condition: rainy
temperature: 8.1
templow: 4.5
- datetime: '2021-01-30T11:00:00+00:00'
precipitation: 19
wind_speed: 2.61
wind_bearing: 229
condition: rainy
temperature: 4.8
templow: 2.9
- datetime: '2021-01-31T11:00:00+00:00'
precipitation: 4
wind_speed: 1.54
wind_bearing: 51
condition: rainy
temperature: 6.3
templow: 3.2
- datetime: '2021-02-01T11:00:00+00:00'
precipitation: 23
wind_speed: 5.87
wind_bearing: 220
condition: rainy
temperature: 5.3
templow: 2.5
- datetime: '2021-02-02T11:00:00+00:00'
precipitation: 3
wind_speed: 3.39
wind_bearing: 225
condition: rainy
temperature: 7.4
templow: 4.7
- datetime: '2021-02-03T11:00:00+00:00'
precipitation: null
wind_speed: 5.08
wind_bearing: 228
condition: cloudy
temperature: 9.8
templow: 5.3
- datetime: '2021-02-04T11:00:00+00:00'
precipitation: null
wind_speed: 1.48
wind_bearing: 226
condition: cloudy
temperature: 8.2
templow: 5
- datetime: '2021-02-05T11:00:00+00:00'
precipitation: null
wind_speed: 1.96
wind_bearing: 28
condition: cloudy
temperature: 8.3
templow: 4.9
friendly_name: OpenWeatherMap
Hope this helps.
Also your full card config please
Of course!
- type: 'custom:apexcharts-card'
graph_span: 8d
span:
start: hour
apex_config:
dataLabels:
enabled: true
series:
- entity: weather.openweathermap
type: column
data_generator: |
return.entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.precipitation];
});
1 Like
Your issue is in your code 
You have that:
return.entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.precipitation];
});
I wrote that:
// There is a space between return and entity, not a . (dot)
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.precipitation];
});
1 Like
Oh wow, how did I miss that 
It works now, thanks!!!
Here’s my take on a forecast graph: min temp, temp and precipitation for the next 8 days;
There’s one small thing I’m still wondering: how to remove the state information from the legend. I only wish to show the series name. Didn’t find it in the apex docs, perhaps with card-mod?
4 Likes
That is not possible yet, please open a feature request 
Will do, I just thought, seeing your traffic sources image in the first post 
1 Like
Some interesting options to overlay multiple periods of data on same chart coming in 1.3.0, thanks @RomRider ! You are writing some really great and useful code for Home Assistant!
Very very powerfull card.
I tried to play with it and I would just report a strange situation.
Ok on PC (firefox) ok on Andoird phone (Chrome) KO on iPhone (Safari and Chrome)
PC
Android
iPhone
Bye
Sandro
Apple sucks One day they will learn how to make a browser or just use chromium as their engine… even Microsoft went this way with Edge Chromium… 
That seems like an upstream bug unfortunately in the ApexCharts.js library that I use.
I’ll have a look but I have little faith about this.
3 Likes