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 
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;
}
You can use the new formatter function:
apex_config:
yaxis:
labels:
formatter: |
EVAL:function (val) {
return val * 1000;
}
I’m no javascript man, so this is somewhat of a guess, but should work
You can use transform to change your “units”.
Like transform: return x * 1000;
The solution from @DonNL will only modify the yaxis numbers. This solution will also modify the values in the chart, so choose the one which suits you 
thx to ROmRider and DonNL,
works like a charm
Regards
Herbert
Much better… I know which I would pick… 
Hi there, I am struggling a bit with formatting my graph properly. What I’m trying to build is a graph that displays the two-hourly average of my sensors, but also the latest measured value. This is what I got so far:
type: 'custom:apexcharts-card'
layout: minimal
graph_span: 24h
update_interval: 1min
apex_config:
legend:
show: false
header:
show: true
title: Temperature
show_states: true
colorize_states: true
all_series_config:
stroke_width: 2
opacity: 0.2
type: area
curve: smooth
group_by:
func: avg
duration: 120min
series:
- entity: sensor.broadlink_temperature
name: Living room
- entity: sensor.bedroom_temperature
name: Bedroom
- entity: sensor.study_temperature_2
name: Study
I like the general appearance but it’d be great if header could display the latest values (instead of the last two-hourly average). Also the graph should end with the lastest actual measurements and not with an average. Any suggestions how to achieve this? Thanks.
Hi all,
type: custom:apexcharts-card
graph_span: 7d
cache: true
update_interval: 1hour
header:
title: Assorbimento
show: true
show_states: true
colorize_states: true
series:
- entity: sensor.mqttpower
yaxis_id: w
type: column
name: Mid
group_by:
func: avg
duration: 1d
- entity: sensor.mqttpower
yaxis_id: w
type: column
name: Max
group_by:
func: max
duration: 1d
- entity: sensor.mqttpower
yaxis_id: w
type: column
name: Min
group_by:
func: min
duration: 1d
- entity: sensor.temp_ext_temp
yaxis_id: t
type: line
name: Esterna
group_by:
func: avg
duration: 1d
color: green
apex_config:
yaxis:
- id: t
opposite: true
forceNiceScale: false
decimalsInFloat: 0
- id: w
forceNiceScale: false
decimalsInFloat: 0
xaxis:
labels:
format: dd
show: true
showAlways: true
chart:
type: area
height: 300
stroke:
show: true
width: 1
legend:
show: false
dataLabels:
enabled: false
distributed: true
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
What am I wrong?
yaxis needs to sit under the main config section, not under apex_config and then it will work
Possible with: in_header: raw in the serie’s show settings.
That’s not very logical for a chart.
Hi. I have two qustions.
I am not able to see the values at the end of the column chart. Any issue in my config?
type: custom:apexcharts-card
apex_config:
stroke:
show: true
width: 1
curve: smooth
legend:
show: true
dataLabels:
enabled: true
graph_span: 24h
header:
show: true
title: Today's Energy Usage
standard_format: true
series:
- entity: sensor.daily_energy_usage
type: column
name: Power Usage
group_by:
func: avg
duration: 2h
For that to happen data points needs to be aligned, so you need to use group_by and set the same duration for both series.
float_precision: 3
What do you mean by “see the values at the end of the column chart”?
Datalabels is an option available in the card configuration thus overriding what you have in apex_config
series:
- entity: sensor.daily_energy_usage
type: column
name: Power Usage
group_by:
func: avg
duration: 2h
show:
datalabels: true
Wow! Absolutely amazing plugin!!!
One question, how do I remove this bottom label when hovering?
