You might be able to do something with the help of config-template-card.
Any hints whow to do?
I’ll have to check on the apexcharts docs, might take a little time until I can give you some pointers.
THanks @RomRider but it also seems that a new week start with sunday? Can you change that?
Is that btw what causing all this? It counts a week sun-sun ? In US they see sundays as the day to start the week right?
end: day makes the chart end at the current day, and because we’re sunday, it ends sunday. If you want to make it end at the end of the week, then use end: week, if you display it on a monday, the chart will be mostly empty.
I believe I could think about a way to make this smart, please open a feature request on GH 
1 Like
Done 
First: thank you for a great tool!
I’ve been able to do all sort of nice graphs for my project with apexcharts-card, but there are a few things that keep pestering me:
‘’’
xaxis:
tickAmount: 5
format: dd.klHH
‘’’
notice, that the graph displays 22 Feb at midnight. Nice!
Unfortunately, when I close the editor, the nice midnight marker disapperars: 
A second issue I have is the data plotted into the future: I can’t seem to limit data to display from now to tomorrow midnight. ‘Span’ only accepts negative arguments, and I’d like to move the other way.
Third small issue: is is possible to add line breaks to titles or further customize them? Aprecharts doc implies that \n should do a line break, but alas that’s not possible
These are alle small issues - thank you!
1 Like
I can’t remove decimals (round up the value) for some reason. Tried to use abs() in transform didn’t work.
series:
- entity: sensor.nbg6616_netout
unit: kB/s
transform: return (x/-8);
name: Wifi Download
color: '#0000ff'
- my speed is reported by netdata from my router and returns kilobits, with negative values. So I turn it into kiloBytes and negate the value, hence *-8…
How to remove decimals from results?
Can someone advise on how to combine the following:
span:
end: day
span:
start: month
WIthout end: day I don’t get the correct results but wthout start: month the graph doesn’t start on the first day of the month.
Please advise because I’m lost now
Edit: I’m using a Utility Meter with setting cycle: daily.
Why does the chart keep summing data from the previous day?
The green bar, consumed energy from panels, should have been reset when a new day started and yet it create a weird sum of doubling the previous day (3.4 + 3.4 + the state value right now)
And the sensor:
Any ideas?
Has anyone been able to create something like this? Basically vertical bars filling up / down. Kind of like a radial bar but displayed as a standing vertical bar that fills up to a maximum value. The first one below shows the utilization of a sensor (15,8 A used out of maximum 20 A).
Might be easier to achieve with custom bar card than with apex charts.
1 Like
I have an input_text helper which i use to track history of mileage between EV charges, this is tracked in the history of the helper.
This helper doesnt update daily so it can stay the same value for various amounts of time before changing. I am wanting to display on a graph where each column represents the value of mileage but it is only displayed when the value is changed.
Currently if i group by 1d i can get multiple columns the same. Is this achievable?
I’d like to specify some CSS variables in the color_list section. This seems to work for the colourised header state, but results in a black colour in the graph itself and the legend. This seems like it may be an issue with the card but I wanted to check in case I’m missing something.
type: custom:apexcharts-card
color_list:
- '#661FFF'
- rgb(var(--color-blue))
header:
show: true
show_states: true
colorize_states: true
series:
- entity: sensor.household_average_temperature
transform: return Math.round(x);
name: Inside
group_by:
duration: 1h
func: max
- entity: sensor.<city-name>_temp
transform: return Math.round(x);
name: Outside
group_by:
duration: 1h
func: max
Hi all thanks for these charts @RomRider
I’ve created these 2 charts but for some reason it misses the label on the first day on the first column.
Can anyone tell me what I need to change to add it.
Thanks.
Here’s my code…
type: custom:apexcharts-card
experimental:
color_threshold: true
update_interval: 5min
apex_config:
xaxis:
labels:
format: ddd
stroke:
show: true
width: 2
curve: smooth
chart:
height: 140%
legend:
show: true
showForSingleSeries: true
horizontalAlign: right
position: top
dataLabels:
offsetY: 2
style:
fontSize: 12px
enabled: true
background:
enabled: true
borderColor: '#fff'
borderWidth: 2
borderRadius: 2
opacity: 0.7
foreColor: '#ccccff'
dropShadow:
enabled: true
top: 2
left: 2
blur: 1
color: '#000000'
opacity: 0.5
fill:
type: gradient
gradient:
type: horizontal
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
graph_span: 1w
span:
end: day
header:
show: true
title: Daily Energy
series:
- entity: sensor.daily_energy
color: rgb(138,43,226)
type: column
show:
datalabels: true
group_by:
func: last
duration: 24h
unit: kWh
3 Likes
Hi All
i have now this chart running. But i want to exclude the red line from the “fill” function. how can i do this?
this is the code
- icon: mdi:solar-power
cards:
- type: 'custom:apexcharts-card'
graph_span: 3h
header:
show: true
title: PV Anlage
show_states: true
colorize_states: true
series:
- entity: sensor.kostal_pv_to_battery_power
name: Batterie laden
color: '#ff444f'
opacity: 0
- entity: sensor.kostal_home_power_from_grid
name: Netzbezug
color: '#00b4fb'
all_series_config:
type: area
curve: smooth
stroke_width: 1
show:
extremas: true
group_by:
func: avg
duration: 5m
apex_config:
fill:
type:
- gradient
gradient:
type: vertical
opacityFrom: 0.6
opacityTo: 0.1
tooltip:
x:
format: 'HH:mm'
Thanks for the reply regarding header size. It seems the Apexchart is not responsive to the header style options I found in another thread 🔹 Card-mod - Add css styles to any lovelace card - #1867 by Ildar_Gabdullin
The goal is to reduce the header size, I tested color below copy-pasted from another thread just to see if it is responsive. If you can write out the code to decrease header size that would be helpful
Option 1: doesn’t do anything
style: |
ha-card {--ha-card-header-color: green;}
Option 2: doesn’t do anything
style: |
.card-header {
background-color: green;
}
Hi all.
I have graph that shows electricity prices from nordpool component.
Is it somehow possible to get horizontal line that will always be at constant value. Like for example line that always will be 0.140 like this:
type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 24h
header:
title: Electricity Price Today
show: true
span:
start: day
now:
show: true
label: Now
series:
- entity: sensor.nordpool_kwh_lv_eur_4_10_0
type: column
show:
extremas: true
float_precision: 3
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
color_threshold:
- value: 0
color: rgba(19, 120, 22, 0.8)
- value: 0.1
color: rgba(138, 177, 0, 0.92)
opacity: 1
- value: 0.15
color: rgba(198, 114, 0, 0.92)
- value: 0.188
color: rgba(200, 0, 0, 0.5)
- value: 0.25
color: rgba(140, 0, 72, 0.8)
- value: 0.35
color: rgba(0, 0, 0, 0.8)
apex_config:
yaxis:
- title:
text: c/kwh
decimalsInFloat: 3
chart:
height: 200px
1 Like