Hello,
I have a donut card that isn’t working as expected on safari:
However on chrome it looks like this:
Another one on safari
Anyone have any ideas?
Thanks
However on chrome it looks like this:
Another one on safari
Anyone have any ideas?
Thanks
Browsers still have various rendering of CSS , but maybe there is something in your code also … so … who knows ?
When using two y-axis for a line / area chart (i.e. primary and secondary axis), is there a simple way to ensure that the 0 values for both axis is on the same horizontal line?
One way to do this I guess would be to specify the minimum and maximum values of each axis, however, the values of both the primary and secondary axis can vary quite a bit from day to day so I’d rather not specify the min and max if I can avoid this (as doing so can mean that on ‘low’ days the graph will look very small in comparison to the maximum values set).
here is the code:
type: custom:apexcharts-card
chart_type: donut
series:
- entity: sensor.boiler_supply_3_1d
name: Boiler Supply
- entity: sensor.downstairs_lights_8_1d
name: Downstairs Lights
- entity: sensor.downstairs_sockets_2_1d
name: Downstairs Sockets
- entity: sensor.fridge_and_garage_7_1d
name: Fridge & Garage
- entity: sensor.kitchen_1_1d
name: Kitchen
- entity: sensor.kitchen_lighting_and_understair_lighting_5_1d
name: Kitchen + Understair Lighting
- entity: sensor.ring_kitchen_and_dining_9_1d
name: Ring Kitchen
- entity: sensor.upstairs_lights_4_1d
name: Upstairs Lights
- entity: sensor.upstairs_sockets_6_1d
name: Upstairs Sockets
- entity: sensor.washer_dryer_10_1d
name: Washer Dryer
yep, works fine in FF and EDGE (out of the box ) , but i assume you already knew that … And very simple “graph/donut”, so hardly a CSS/script issue, And i got all 10 entities.
So i suggest you start with “flush” your caches, and look at those device/browsers where it doesn’t work … sorry i don’t have and never will have Safari ( but it seems working on 1 of your devices/safari, so thats what you should focus on)
1 Like
Hello,
Possibly a simple solution but I just cannot find it. I created below chart and would like to add the time as a label (too). It now shows the y-axis value but how can I add the x-axis value in the form of hh:mm ?
in this case 18:59
This is how I did it (last couple lines):
series:
- entity: sensor.fibaro_plug_61_power
yaxis_id: energy
show:
legend_value: false
type: area
name: garagevärme
curve: straight
stroke_width: 2
group_by:
func: avg
duration: 1h
Not sure what you want to accomplice, but maybe this url can give you a hint
Formatting Axes Labels
Datetime
PS: remember to get rid of the {brackets}
Thanks, the idea was/is to have the time on top of the column but as a lable on the x-axis is fine too
However, whatever I try the formatting does not do anything to the x-axis.
As an example, this…still showing date only
apex_config:
xaxis:
labels:
datetimeFormatter:
hour: HH:mm
EDIT: I tried format: h and then it shows the values 12, so apparently it does not have any time but the tooltip does show time…need to dig further
hello how can I get the correct graph that doesn’t go straight horizontal since it hasn’t finished its run yet?
then how could i monitor only from sunrise to sunset?
yeah, i think it depends to some extend what your sensor(index) deliver, but also whether it’s and Hourly-Graph, or Day-graph(as you have)
When i look at 2 of my “Day” graph, i have 2 different, values in the Label( 1 with Day/Date and one with Date/Day/Hour"whole hour") and various formatting
i.e
tooltip:
x:
format: HH. mm.
placed under apex_config:
And
tooltip:
enabled: true
Placed under … apex_config:/xaxis …well look below 
thou your "timestamp, is very “unique” , as my timestamp follows the group by/etc.
- type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 24H
span:
start: hour
header:
show: false
show_states: false
all_series_config:
stroke_width: 0
group_by:
func: raw
duration: 1d
start_with_last: true
apex_config:
stroke:
curve: stepline
grid:
padding:
top: 0
right: 0
bottom: 0
left: -20
strokeDashArray: 0
xaxis:
lines:
show: false
yaxis:
lines:
show: false
chart:
height: 340
legend:
show: false
xaxis:
position: top
labels:
style:
colors: '#87bf50'
fontWeight: 600
fontSize: 14px
format: DD HH mm
tooltip:
enabled: true
yaxis:
labels:
style:
colors: '#FFBF00'
fontWeight: 400
fontSize: 14px
align: left
offsetX: -15
id: sek2
decimalsInFloat: 2
tickAmount: 10
tooltip:
x:
format: HH. mm
series:
- entity: sensor.energy_price_xx
name: Sek
yaxis_id: sek1
unit: Sek
type: area
extend_to: now
data_generator: |
return entity.attributes.raw_today.map((entry) =>
{
var date = new Date(entry.time)
return [date, entry.total];
});
show:
legend_value: false
datalabels: false
opacity: 0.5
color_threshold:
- value: 0.4
color: green
- value: 0.6
color: cyan
- value: 0.8
color: blue
- value: 1
color: yellow
- value: 1.2
color: orange
- value: 1.5
color: red
float_precision: 2
- entity: sensor.energy_price_xx
name: Sek/kWh
yaxis_id: sek2
unit: Sek
type: area
extend_to: now
data_generator: |
return entity.attributes.raw_tomorrow.map((entry) =>
{
var date = new Date(entry.time)
return [date, entry.total];
});
show:
legend_value: false
datalabels: false
opacity: 0.5
color_threshold:
- value: 0.4
color: green
- value: 0.6
color: cyan
- value: 0.8
color: blue
- value: 1
color: yellow
- value: 1.2
color: orange
- value: 1.5
color: red
float_precision: 2
card_mod:
style: |
ha-card {
background: url({{state_attr("camera.tpc2_sd_stream","entity_picture")}});
background-repeat: repeat;
background-size: 100% 100%;
color: red;
height: 314px !important;
width: 520px !important;
margin: -10px 0px 0px -15px;
padding: 0px 0px 0px 0px;
}
- type: custom:text-divider-row
text: Current Electricity Per Unit
align: center
Tooltips works with Day-Columns also “HH mm”
PS: Sorry for the mess, gotta get out of the door now
extend_to: now …look above
Thanks for this, will check later this week…apreciate the feedback
hello sorry but I understand, below my code
tell me how should i change the code
cards:
- type: horizontal-stack
cards:
- type: sensor
entity: sensor.solar_autconsumo_totali_giornalieri
detail: 2
- type: sensor
entity: sensor.solar_consumi_totale_giornaliero
detail: 2
- type: horizontal-stack
cards:
- type: custom:apexcharts-card
graph_span: 24h
span:
start: day
header:
show: true
title: POWER
show_states: true
colorize_states: true
all_series_config:
stroke_width: 2
opacity: 0.6
type: area
apex_config:
chart:
height: 350
zoom:
type: x
enabled: true
autoScaleYaxis: false
toolbar:
show: true
autoSelected: zoom
xaxis.type: datetime
stroke:
width: 1
curve: smooth
series:
- entity: sensor.solaredge_ac_power
unit: Kw
color: green
group_by:
func: avg
duration: 5min
- entity: sensor.solar_consumi
type: line
color: red
group_by:
func: avg
duration: 5min
- type: horizontal-stack
cards:
- type: custom:apexcharts-card
header:
show: true
title: Yield Daily
show_states: true
colorize_states: true
apex_config:
chart:
height: 350
zoom:
type: x
enabled: true
autoScaleYaxis: false
toolbar:
show: true
autoSelected: zoom
xaxis.type: datetime
series:
- entity: sensor.solar_produzione_totale_giornaliero
color: Green
type: column
group_by:
func: max
duration: 24h
- entity: sensor.solar_immissioni_totali_giornalieri
color: blue
type: column
group_by:
func: max
duration: 24h
- entity: sensor.solar_autconsumo_totali_giornalieri
color: orange
type: column
group_by:
func: max
duration: 24h
graph_span: 15d
span:
end: day
type: vertical-stack
Hey,
ty for the charts. Much better than default ones.
I’m unable to make color_threshold work.
Here is the code:
- entity: sensor.power_grid_power
stroke_width: 0
color: '#11aa77'
show:
header_color_threshold: true
type: area
color_threshold:
- value: 8000
color: red
- value: 0
color: black
- value: -8000
color: green
group_by:
func: avg
duration: 10min
And I get a complete solid green block:
Any hints?
card-mod 3.2.2
ha 2023.4.5
Btw by swapping from default charts to apex charts my rasbperry went from 1.5W to 2.5-3W consumption.
ok…
as mentioned like my code above …
extend_to: now
under the specific serie(series)
Have you added:
type: custom:apexcharts-card
experimental:
color_threshold: true
2 Likes
That was it!
I started reading from 2020 and I thought “well it wont be experimental anymore” 
Tyvm.
BTW I wanted to add that I use 2 cards in a rapberry 3 a+
Power used to be 1.4-1-6W and now raised to 2.5-3W.
Are there any power saving measures like pre-render mode or similar? Lovelace cards send a “png” for the chart, that is why it must be so power efficient.
I’m not blaming the apxcharts, I love them, but hey its double the power 
Power increase is to render these two cards (left refresh 60s, right refresh 90s) [raspi os + firefox]
Hi, I have several sensors that provide me with the daily total (production, consumption, inputs, self-consumption) I would like to create a bar graph that gives me the total of these sensors for each day in 14 days.
I made this code but it doesn’t work well, it shows much higher and absolutely incorrect values.
what am I doing wrong?
cards:
- type: horizontal-stack
cards:
- type: custom:apexcharts-card
header:
show: true
title: Yield Daily
show_states: true
colorize_states: true
apex_config:
chart:
height: 350
zoom:
type: x
enabled: true
autoScaleYaxis: false
toolbar:
show: true
autoSelected: zoom
xaxis.type: datetime
series:
- entity: sensor.solar_produzione_totale_giornaliero
color: Green
type: column
group_by:
func: max
duration: 24h
- entity: sensor.solar_immissioni_totali_giornalieri
color: blue
type: column
group_by:
func: max
duration: 24h
- entity: sensor.solar_autconsumo_totali_giornalieri
color: orange
type: column
group_by:
func: max
duration: 24h
graph_span: 15d
span:
end: day
type: vertical-stack
Im trying to compare ack.yield today with ack.yeild yesterday, see sqreenshot.
This is my code, but I only get total ack.yield för yesterday in the top right corner.
Is it possible to only show this value as yesterdays value for now()?
type: custom:apexcharts-card
graph_span: 24h
header:
title: Produktion
show: true
show_states: true
span:
start: day
now:
show: true
color: red
show:
last_updated: true
apex_config:
yaxis:
- min: 0
colorize_states: true
xaxis:
tooltip:
enabled: false
series:
- entity: sensor.inverter_daily_yield
name: Idag
group_by:
duration: 1min
float_precision: 2
extend_to: now
data_generator: ''
stroke_width: 3
show:
extremas: false
in_header: true
legend_value: false
- entity: sensor.inverter_daily_yield
name: Igår
offset: '-1d'
type: column
float_precision: 2
data_generator: ''
show:
extremas: false
in_header: false
legend_value: false
- entity: sensor.inverter_daily_yield
offset: '-24h'
name: Diff vs. igår
group_by:
duration: 1min
type: column
float_precision: 2
data_generator: ''
show:
in_chart: false
extremas: false
in_header: true
legend_value: false