Update to 1.5.0 there’s a fix for that in there. Verify the console of your browser to be sure you are really running 1.5.0 and not a cached version.
Struggeling with the now and fill_raw settings a bit.
When I put the now code before of apex_config I get an error message (value.now is extraneous) and when I put it inside nothing is happening.
type: 'custom:apexcharts-card'
header:
title: Elpriset idag & imorgon
show: true
graph_span: 2d
span:
start: day
apex_config:
now:
show: true
color: '#ff0000'
label: Now
Furthermore, I don’t really get how to use the fill_raw setting, couldn’t find any example code.
Anyone that has tried these and can point me in the right direction?
Thanks!
Clear your browser cache, now is going into the main part of the config. If it errors out, it’s because you’re still running an old version from the cache of your browser.
What do you want to achieve?
Eg: this would fill any empty values with the previous non empty value from your sensor.
series:
- entity: sensor.sensor_with_null
fill_raw: last
Tried in another browser and it worked just fine there. Clearing cache solved it. Thanks!
This is great. I’m gonna get on board. Makes me wonder why there wasn’t ever a “Grafana card”? Grafana charts are pretty cool too but too hard to integrate into frontend!..
Because that’s not how it works haha 
However, you can use a camera entity with a path to a chart in grafana to display a png of your grafana chart. It’s compute intensive and not very good looking though or maybe iframes.
You can get some examples from this thread: Best way to get Grafana chart into Lovelace card
There is no emoticon with large enough 
Really feel ashamed, after so much time spend with HA Thanks a lot! working like a charm!
After updating the card works marvellously (see below). A small feature request from my end would be to add a “total” variable to it. Rationale behind it is that I measure various appliances at home and also the total power consumption. If I could add the “total value consumed” to the piechart it would allow me to also include the “unmeasured” part. I currently do that by leveraging a seperate sensor which basically does “unmeasured = total measured - appliance1 - appliance 2 - …”, but including it in the card would be much easier.
4 Likes
I think that would solve your issue but it works only with chart_type: donut:
apex_config:
plotOptions:
pie:
donut:
total:
show: true
showAlways: true
Please kindly assist, I may have the yaml wrong so your code is not recognising it?
I am trying to use an infill path for one of the series, the first. All looks good except the grey fill for “boiler_on_time” is not filled. Everything else is as expected
?
type: 'custom:apexcharts-card'
header:
show: false
series:
- entity: sensor.boiler_on_time
name: On time
color: rgb(100,100,100)
- entity: sensor.ble_temperature_lounge
name: Lounge
- entity: sensor.ble_temperature_dad
name: Dad
- entity: sensor.ble_temperature_summer
name: Summer
- entity: sensor.ble_temperature_guest
name: Guest
- entity: sensor.ble_temperature_kitchen
name: Kitchen
graph_span: 12h
update_interval: 5m
cache: true
apex_config:
fill:
type: solid
opacity:
- 0.5
- 0
- 0
- 0
- 0
- 0
chart:
zoom:
type: x
enabled: true
autoScaleYaxis: false
toolbar:
show: true
autoSelected: zoom
stroke:
width:
- 1
- 3
- 3
- 3
- 3
- 3
curve: smooth
yaxis:
- title:
text: On-time
opposite: true
min: 0
max: 5
tickAmount: 1
- title:
text: Temperature
min: 15
max: 25
tickAmount: 10
- show: false
min: 15
max: 25
- show: false
min: 15
max: 25
- show: false
min: 15
max: 25
- show: false
min: 15
max: 25
That’s a bit broken at the moment. You can’t redefine opacity because of this bug. Also fill opacity for a line will apply the opacity to the line itself (not very logical but that’s how it is done in ApexCharts). If you want to fill the area between 0 and the line, you’ll have to use type: area in the serie.
Hi,
Could someone tell me how i would combine this into one stream of data please. I’m trying to chart how likely it to rain in the next week, having a time scale along the bottom, and turn each of these into data points, rather than individual lines.
Thank you.
That is not yet possible, but I plan to add this feature soon (compare sensors together without using a timeline)
1 Like
Thank you. I’m trying to achieve something like the bottom card here. https://github.com/lukevink/hass-config-lajv/blob/dffb9dd0bd5e53031fc3300117211f3566f314f0/previews/screen-weather-rain.png?raw=true
1 Like
That can already be done using a weather integration where all this information is in the attributes and the data_generator feature.
type: custom:apexcharts-card
graph_span: 8d
span:
start: hour
header:
show: true
title: Precipitation Forecast
series:
- entity: weather.openweathermap ## Need a weather entity here which provides precipitation forecast
type: area
extend_to_end: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.precipitation];
});
Perfect! Thank you. It looks like that config works with dark_sky too.
1 Like
You can do some funny stuff like:
- type: custom:apexcharts-card
graph_span: 8d
span:
start: day
offset: -3d
header:
show: true
title: Temperature Forecast
show_states: true
now:
show: true
label: 'now'
apex_config:
legend:
show: false
series:
- entity: weather.openweathermap
name: Temperature
unit: °C
attribute: temperature
fill_raw: last
extend_to_end: false
group_by:
func: avg
duration: 1h
- entity: weather.openweathermap
type: line
extend_to_end: false
unit: °C
show:
in_header: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.temperature];
});
8 Likes
Wow that is cool, I’m adding that!
Beautiful card, I use it for all my temperature. One question, is it possible to have the maximum and minimum values for each sensor in the header? I have 2 sensors for each card and in the header I have on the left the current temperature for sensor 1, on the right the current temperature for sensor 2. It is possible to have under the respective current temperatures, even the maximum and minimum temperature of each sensor ?
Thanks. I’ll try and get that inserted tonight.