Awesome…
Just wondering what this is when I click the hamburger and why it’s blank? If I click the blank area it wants to save an svg file…
Options to download the graph - it’s likely not showing because of styling
That is a bug in apexcharts, nothing much I can do about it. It happens mainly when there’s null values in the data. One day it might disappear but for now you can ignore it.
I’m not sure I understand why it’s not displaying anything for you, could you try as a simple card instead of putting it in a picture element?
You can disable the hamburger menu from the apex_config but it should contain 3 lines with “download svg, png and something else I don’t remember”. The fact that it’s white is probably because of styling and your theme as @bacco007 said. I’m going to see if there something I can do about it. Let’s open an issue for that 
1 Like
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