Thanks; working perfectly. I was looking for it in the ha-card style and overlooked the apex config. Will follow your progress on the threshold color. Thanks again
I’m sure it is 
The chrome cache is not the same as the companion app. You have to clear the cache of the companion app and probably also the cache of the webview app.
Any default values you think I should set for all the fontFamily config?
You can actually hit the entire card by setting it under chart. I use the font below globally so its a quick match for everything else on my dashboards. I don’t know why people would need multiple fonts in same chart. Probably could just add it to the change height example at the bottom of the github page and call it a day. Not sure it would be worth the time to change the card configuration itself.
apex_config:
chart:
fontFamily: "Julius Sans One"
First of all: I love this card! Is exactly what I was looking for. I do however found a strange quirk in displaying the pie chart (and donut chart too).
When I use the following:
type: 'custom:apexcharts-card'
chart_type: line
series:
- entity: sensor.sds11_pm_10_ug_m3_2
- entity: sensor.sds11_pm_2_5_ug_m3_2
I get the below (as expected):
But if I turn this into a pie chart like below:
type: 'custom:apexcharts-card'
chart_type: pie
series:
- entity: sensor.daily_energy_boiler_total
name: Boiler
- entity: sensor.daily_energy_house_total
name: Whole house
The result is the following:
Am I doing something wrong?
EDIT: nevermind… Updateing Apexcharts solved the issue 
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];
});