Awesome. Thanks for that.
Quick question: why does the card require enabling the recorder for an entity when only a pie or a donut is used? Ex:
type: 'custom:apexcharts-card'
chart_type: donut
series:
- entity: sensor.energymonthlywatertank
The above won’t work if sensor.energymonthlywatertank is excluded from the recorder, even if only the last value of the sensor is needed for the chart.
The reason I’m asking is that I have over 15 “utility meter” that are updated every two seconds that basically count the kWh total of many different loads in my home. Enabling the recorder on those will chew up GB of data while I only need the last state; the integration total.
Let me know if I missed something.
Thanks !
Because you can also use group_by with those types of charts (which requires history). It could be an optimization for apexcharts-card, but it will require some rework to make it happen.
Better fill in a feature request on GH so that I don’t forget about it 
1 Like
Hi all,
why did happen this?
The red line must go to 100% instantly…
type: 'custom:apexcharts-card'
graph_span: 1d
cache: true
header:
title: Deumidificatore/Umidificatore
show: true
show_states: true
colorize_states: true
apex_config:
yaxis:
min: 0
max: 100
xaxis:
labels:
format: hh
show: true
showAlways: true
legend:
show: false
dataLabels:
enabled: false
distributed: true
series:
- entity: sensor.umidita_int_humidity
type: line
name: Umidità Interna
color: blue
- entity: sensor.umidificatoretempl
type: line
name: Umid.
- entity: sensor.deumidificatoretempl
type: line
name: Deum.
Not sure if you had solved this or not yet, but wanted to share since it was driving me crazy as well trying to extend the foreignobject element:
card_mod:
style: |
.apexcharts-canvas svg foreignObject {
height: << height of card >> px;
}
I actually wanted to have the chart angle start at 0 but couldn’t figure out how to get the legend text to right-align when floating, so your example provided a happy solution (flip it and use the default left-align). Thanks!
1 Like
You’ll want to use curve: stepline in the serie to have a “staircase” like chart. That’s because by default, it creates a smooth curve.
I have to ask you again @RomRider about the glitch in the drawing of the chart below. As you can see it looks like there are shaddows and the filling of the graph is not even. For some reason I get this from time to time but doing small changes like changing time span from 48h to 47h can sometimes fix it (see chart #2 below).
If I remember it correctly, adding fill_raw: last should fix it, but for some reason I still get the issue sometime. Any ideas?
type: custom:apexcharts-card
header:
title: ''
show: true
show_states: true
colorize_states: false
graph_span: 47h
apex_config:
tooltip:
enabled: false
annotations:
position: back
yaxis:
- 'y': 0
strokeDashArray: 0
borderColor: '#303030'
borderWidth: 1
yaxis:
forceNiceScale: true
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
xaxis:
axisBorder:
show: false
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
legend:
show: false
chart:
height: 225
grid:
show: false
borderColor: '#303030'
strokeDashArray: 3
position: back
dataLabels:
enabled: false
stroke:
width: 1
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.8
inverseColors: false
opacityFrom: 0.6
opacityTo: 0
stops:
- 0
series:
- entity: sensor.garaget
name: Garaget
type: area
curve: smooth
fill_raw: last
color: '#404040'
float_precision: 1
transform: return x + 1;
show:
in_chart: true
- entity: sensor.nibe_105703_40004
name: Utomhus
type: area
curve: smooth
fill_raw: last
color: fc7703
float_precision: 1
transform: return x + 1;
- entity: sensor.nibe_105703_43084
name: Eltillsats
type: column
color: orange
fill_raw: last
show:
in_chart: true
group_by:
func: avg
duration: 20min
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
margin: 8px 8px 28px 8px;
font-size: 15px;
text-align: left;
font-family: Segoe UI Light;
}
div#header__title {
font-size: 15px;
font-family: Segoe UI Light;
}
#state__value > #state {
font-weight: 100;
}
1 Like
Is there a way to show 7 kWh directly in the donut rather than the percentage (29 in this case) ?
I feel showing “29” for 29% is redundant, since the donut is already roughly showing that it is one third. 7 kWh is new data that I feel would be more useful at a glance.
Thanks for teaching me how to do this!
(is there a better way to ask questions rather than this thread, or this is it?)
4 Likes
RomRider,
Would that be an “issue” or a “pull request”? I don’t contribute to the project, so I feel a “pull request” is not appropriate. I’m puzzled.
It would be a feature request as an issue on github. I don’t believe what you are asking is possible with the library I use, I’d have to check further.
2 Likes
For the recorder feature request, it’s been opened as #169.
Thanks for checking about the labels. I’ve spotted at least two other user asking the same question in this thread or a variant of that question. Let me know if you’d like me to open a feature request for that one as well.
Thanks !
Anyone tried Apexcharts with Monitor Docker?
I have everything setup and have a sensor for every docker container. They look like any other sensor in Home Assistant with multiple attributes. One of the attributes is “memory” for example. However, if I try to graph the attribute with apexcharts it doesn’t work. Apexcharts just says “Loading…” forever with no errors.
- type: custom:apexcharts-card
update_interval: 30s
graph_span: 24h
series:
- name: Test Container
entity: sensor.docker_test_container #Changeme
attribute: memory
unit: '%'
I find this really strange as it works with any other sensor as long as you change the entity and attribute. Is there any reason why this doesn’t work with sensors produced by this integration but with any other? The only difference I can see is that the integration doesn’t use unique id’s on entities. Does that matter?
Your entity is probably excluded from the recorder
1 Like
I love you!
Thanks so much, I totally forgot I had added sensor.docker_* to me recorder exclusion list.
Hi, i have created some Graphs with Apexchart.
Some of my Charts are not so smooth:
Here the code:
type: custom:apexcharts-card
graph_span: 48h
header:
show: true
title: Pooltemperatur
show_states: true
colorize_states: false
series:
- entity: sensor.pooltemperatur
stroke_width: 3
type: area
Can someone tell me what i must chnage to see a “smoother” graph?
In “mini-graph-card” the graph is smooth:
Thanks for help.
Regards
Herbert
mini-graph-card uses an average function to draw the chart. You can reproduce the same behavior using group_by in apexcharts-card 
1 Like
Ahh…great. Thanks for help
Can you share the code of the graphs that you made for the steps and sleep. And also from you power and gas. Thanks!
Hi,
I would like an hourly overview of how much water has been used. Can you still change the number in the Y axis? Instead of 0.02 e.g. 20.0. And why am I not seeing any values for the columns?
type: custom:apexcharts-card
header:
show: true
title: ApexCharts-Card
show_states: false
colorize_states: false
series:
- entity: sensor.wasserzaehler
type: column
group_by:
func: diff
duration: 60min
apex_config:
yaxis:
- show: true
decimalsInFloat: 3
forceNiceScale: true
Can someone help?
Thx.
Herbert
Sure. Here you go:
Steps:
- type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.google_fit_dick_steps
name: Vandaag
show_icon: false
show_state: true
state_display: |
[[[
return `<font size=5><b>${entity.state}</b></font> / 6000 stappen`
]]]
style: |
ha-card {
margin-top: 3px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 255, 255, 0.0);
}
tap_action:
action: navigate
navigation_path: /ui-map/family_dick_health_steps
styles:
grid:
- grid-template-areas: '"n n graph" "s s graph" "bar bar bar"'
- grid-template-rows: min-content min-content min-content
- grid-template-columns: min-content
name:
- justify-self: start
- padding-left: 10px
- color: rgb(75, 204, 82)
- font-weight: bold
state:
- justify-self: start
- padding-left: 10px
custom_fields:
bar:
- height: 15px
- width: 100%
custom_fields:
bar:
card:
entity: sensor.google_fit_dick_steps
color: rgb(75, 204, 82)
positions:
icon: 'off'
indicator: inside
name: 'off'
type: custom:bar-card
max: 6000
tap_action:
action: navigate
navigation_path: /ui-map/family_dick_health_steps
style: |
bar-card-value {
font-size: 1px;
color: rgb(75, 204, 82);
}
bar-card-markerbar {
background-color: rgba(255, 255, 255, 0.5);
}
ha-card {
margin-top: 7px;
text-align: left;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 255, 255, 0.0);
}
- type: custom:apexcharts-card
experimental:
color_threshold: true
apex_config:
min: 0
tickAmount: 4
chart:
height: 250px
tooltip:
enabled: true
series:
- entity: sensor.google_fit_dick_steps
color_threshold:
- value: 0
color: rgb(96, 130, 98)
- value: 6000
color: rgb(75, 204, 82)
name: Stappen
group_by:
func: max
duration: 1d
fill: zero
type: column
graph_span: 7d
span:
end: day
header:
show: true
title: Afgelopen week
floating: false
style: |
ha-card {
margin-top: 10px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 255, 255, 0.0);
}
Sleep
- type: vertical-stack
cards:
- type: custom:button-card
entity: input_text.sleeping_total
name: Slaap
show_icon: false
show_state: true
state_display: |
[[[
return `<font size=4><b>${entity.state}</b></font> geslapen.`
]]]
style: |
ha-card {
margin-top: 14px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 255, 255, 0.0);
}
tap_action:
action: none
styles:
grid:
- grid-template-areas: '"n n graph" "s s graph" "bar bar bar"'
- grid-template-rows: min-content min-content min-content
- grid-template-columns: min-content
name:
- justify-self: start
- padding-left: 10px
- color: rgb(75, 204, 82)
- font-weight: bold
state:
- justify-self: start
- padding-left: 10px
custom_fields:
bar:
- height: 120px
- width: 100%
- margin-top: '-12px'
custom_fields:
bar:
card:
type: history-graph
entities:
- entity: var.dick_sleep
name: Slaap
hours_to_show: 24
style: |
ha-card {
margin-top: 7px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 255, 255, 0);
}
- type: custom:apexcharts-card
experimental:
color_threshold: true
chart_type: line
series:
- entity: sensor.sleeping_states
curve: stepline
stroke_width: 2
color_threshold:
- value: 1
color: '#005580'
- value: 2
color: '#8095FF'
- value: 3
color: '#4DE1FF'
- value: 4
color: '#FF8C19'
span:
start: day
offset: '-3h'
graph_span: 12h
apex_config:
tooltip:
enabled: false
chart:
height: 180px
yaxis:
tickAmount: 3
min: 1
max: 4
opposite: true
labels:
formatter: |
EVAL:function(value) {
if (value == 1) {
return "Diep";
} else if (value == 2) {
return "Licht";
} else if (value == 3) {
return "REM";
} else if (value == 4) {
return "Wakker";
}
}
style: |
ha-card {
margin-top: -65px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 255, 255, 0.0);
}
- type: custom:apexcharts-card
chart_type: pie
series:
- entity: input_number.sleeping_state_rem
name: REM
color: '#4DE1FF'
show:
as_duration: second
- entity: input_number.sleeping_state_light
name: Lichte slaap
color: '#8095FF'
show:
as_duration: second
- entity: input_number.sleeping_state_deep
name: Diepe slaap
color: '#005580'
show:
as_duration: second
apex_config:
chart:
height: 250px
style: |
ha-card {
margin-top: -25px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 255, 255, 0.0);
}
- type: custom:apexcharts-card
experimental:
color_threshold: true
apex_config:
min: 0
tickAmount: 4
chart:
height: 250px
tooltip:
enabled: true
yaxis:
tickAmount: 3
min: 4
max: 10
opposite: true
labels:
formatter: |
EVAL:function(value) {
return value + " uur";
}
series:
- entity: input_number.sleeping_total
color_threshold:
- value: 0
color: rgb(96, 130, 98)
- value: 6
color: rgb(75, 204, 82)
name: Stappen
group_by:
func: max
duration: 1d
fill: zero
type: column
graph_span: 7d
span:
end: day
header:
show: true
title: Afgelopen week
floating: false
style: |
ha-card {
margin-top: -5px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 255, 255, 0.0);
}
Electricity, gas & water
- type: vertical-stack
cards:
- type: markdown
style: |
ha-card {
font-size: 150%px;
font-family: 'Open Sans', sans-serif;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
}
content: >
<b>Huidig verbruik:</b><br /><table><tr><td>Gasvebruik:
</td><td>{{states.sensor.hourly_gas_consumption.state}} m3/h.
</td><td> <i>(€ {{states.sensor.current_gas_cost.state }} per
uur)</i></td></tr> <tr><td>Elektraverbruik:
</td><td>{{states.sensor.power_consumption.state}} mWh. </td><td>
<i>(€ {{ states.sensor.current_power_cost.state }} per
uur)</i></td></tr> <tr><td>Waterverbruik:
</td><td>{{states.sensor.watermeter_hourly.state}} L/h. </td><td>
<i>(€ {{ states.sensor.current_water_cost.state }} per
uur)</i></td></tr></table>
- type: custom:apexcharts-card
yaxis:
- id: electra
apex_config:
decimalsInFloat: 2
tickAmount: 3
min: 0
max: 5
title:
text: kWh
style:
fontWeight: 600
- id: gas
apex_config:
decimalsInFloat: 2
tickAmount: 3
min: 0
max: 2
title:
text: m3h
style:
fontWeight: 600
- id: water
apex_config:
labels:
show: true
minWidth: 0
maxWidth: 1
decimalsInFloat: 0
tickAmount: 3
min: 0
title:
text: L/h
style:
fontWeight: 600
series:
- entity: sensor.power_consumption
yaxis_id: electra
name: Electra
group_by:
func: avg
duration: 10min
fill: 'null'
type: line
curve: straight
stroke_width: 1
unit: kW
float_precision: 2
color: rgb(255, 208, 0)
- entity: sensor.hourly_gas_consumption
yaxis_id: gas
name: Gasverbruik
group_by:
func: avg
duration: 10min
fill: last
type: line
curve: straight
stroke_width: 1
unit: m3
float_precision: 2
color: rgb(125, 173, 129)
- entity: sensor.watermeter_hourly
yaxis_id: water
name: Waterverbruik
group_by:
func: avg
duration: 10min
fill: last
type: line
curve: straight
stroke_width: 1
unit: L
float_precision: 2
color: rgb(122, 193, 255)
graph_span: 1d
apex_config:
chart:
height: 150px
tooltip:
enabled: true
shared: true
onDatasetHover:
highlightDataSeries: false
x:
show: false
'y':
show: true
header:
show: true
title: Verbruik afgelopen 24 uur
floating: false
now:
show: true
style: |
ha-card {
font-size: 25px;
text-align: center;
margin-top: 8px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 255, 255, 0.5);
}
img {
border-radius: 50px;
}
- type: custom:apexcharts-card
series:
- entity: sensor.total_water_cost
name: Waterverbruik
group_by:
func: diff
duration: 1d
fill: zero
type: column
curve: stepline
stroke_width: 4
unit: €
float_precision: 2
color: rgb(122, 193, 255)
- entity: sensor.total_gas_cost
name: Gasverbruik
group_by:
func: diff
duration: 1d
fill: zero
type: column
curve: stepline
stroke_width: 4
unit: €
float_precision: 2
color: rgb(125, 173, 129)
- entity: sensor.total_power_cost_low
name: Avondtarief
group_by:
func: diff
duration: 1d
fill: zero
type: column
curve: stepline
stroke_width: 4
unit: €
float_precision: 2
color: rgb(255, 247, 0)
- entity: sensor.total_power_cost_normal
name: Dagtarief
group_by:
func: diff
duration: 1d
fill: zero
type: column
curve: stepline
stroke_width: 4
unit: €
float_precision: 2
color: rgb(255, 208, 0)
graph_span: 7d
stacked: true
span:
end: day
header:
show: true
title: Kosten afgelopen week
floating: false
apex_config:
chart:
height: 180px
tooltip:
enabled: true
shared: true
onDatasetHover:
highlightDataSeries: false
x:
show: false
'y':
show: true
yaxis:
- decimalsInFloat: 0
tickAmount: 4
min: 0
max: 12
title:
text: € per dag
style:
fontWeight: 600
style: |
ha-card {
font-size: 25px;
text-align: center;
margin-top: 8px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 255, 255, 0.5);
}
img {
border-radius: 50px;
}
6 Likes