My language is French and I don’t use the locale: parameter and my graphics use French.
Alright, so maybe something with my setup or the se
locale. Maybe another Swedish user can give feedback
I’m having a problem with graphs that refer to sensors that haven’t updated since the previous day but don’t span that far. It leave gaps on the graph until the first change of the day. Is there a way to fetch the last piece of data to display until that first change of value please?
type: custom:apexcharts-card
graph_span: 24h
span:
start: day
header:
title: Water Heater Input (kWh)
show: true
show_states: false
series:
- entity: sensor.hot_water_kw_helper
type: area
transform: return x / 1000;
color: '#3757cc'
opacity: 0.2
group_by:
func: avg
duration: 10min
stroke_width: 2
extend_to: now
yaxis:
- decimals: 1
apex_config:
tickAmount: 3
min: 0
max: '|+0.1|'
apex_config:
legend:
show: false
chart:
height: 200px
grid:
show: true
borderColor: '#404040'
strokeDashArray: 1
position: back
tooltip:
enabled: false
Can i change the Text Position of the Total somewhere?
I want it a little bit higher
There is no way to style the extremes (min/max) like the labels, right? Not even with config-template-card?
Hello All love this card @RomRider . When using a pie chart is there a way to have the color of just one slice of the pie change based on it’s reading? I tried the below config but it does nothing. TIA for any help.
type: custom:apexcharts-card
chart_type: pie
header:
show: true
show_states: true
colorize_states: true
title: WB Soil Sensor
series:
- entity: sensor.soilsensor_soil_moisture
name: Moisture
color_threshold:
- value: 0
color: red
- value: 30
color: yellow
- value: 40
color: green
- entity: sensor.soilsensor_battery
name: Battery
- entity: sensor.soilsensor_temperature
name: Temp
type: column
- entity: sensor.soilsensor_linkquality
name: Link Quality
type: column
Hi, nice job,…curious, what HWsensor do you use to read out those water parameters?
Is there a way we can hide the x-axis?
I tried the following but not luck:
apex_config:
legend:
show: false
xaxis:
lables:
show: false
axisBorder:
show: false
axisTicks:
show: false
crosshairs:
show: false
tooltip:
enabled: false
Edit: If I look at this it should be working…
? where do you see that option ?
xaxis:
show: false
It doesn’t exist, my bad. Only yaxis has it. Removed. Problem exists still. So is there a way to remove x-axis?
Hi,
I have a problem regarding the rendering of colums in a line chart. My goal is to have two series, one shown as a line
(data coming from historical sensor data) the other one as column
(data coming from a data_generator). These columns should be rendered with a 25% opacity. Therefore I set the stroke_witdh
to 0
and the opacity
to 0.25
.
This seems to work fine, as to be seen in this example, with random data generated by a data_generator
, for both series.
type: custom:apexcharts-card
header:
show: false
title: ApexCharts-Card
show_states: true
colorize_states: true
apex_config:
legend:
show: false
series:
- entity: sensor.forecast_solar_gesamt_tagesproduktion_heute
stroke_width: 0
opacity: 0.25
type: column
show:
legend_value: false
in_header: false
name_in_header: true
data_generator: |
const now = new Date();
const data = [];
for(let i = 0; i <= 48; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 20) + 1)])
}
return data.reverse();
- entity: sensor.temperatur_aussen_strasse_temperature
stroke_width: 2
opacity: 0.75
data_generator: |
const now = new Date();
const data = [];
for(let i = 0; i <= 48; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 20) + 1)])
}
return data.reverse();
But as soon as I remove the data_generator
from the second series (the line
, not the columns
itself!) so it uses the historical sensor data, the colums become very slim lines.
type: custom:apexcharts-card
header:
show: false
title: ApexCharts-Card
show_states: true
colorize_states: true
apex_config:
legend:
show: false
series:
- entity: sensor.forecast_solar_gesamt_tagesproduktion_heute
stroke_width: 0
opacity: 0.25
type: column
show:
legend_value: false
in_header: false
name_in_header: true
data_generator: |
const now = new Date();
const data = [];
for(let i = 0; i <= 48; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 20) + 1)])
}
return data.reverse();
- entity: sensor.temperatur_aussen_strasse_temperature
stroke_width: 2
opacity: 0.75
I tried setting the stroke_width
to a value greater than zero to thicken the colums, but the result is bad in two ways: First, the opacity is ignored by the outline and second, the width is ‘fixed’ so does not change on different display sizes.
Has anyone else encountered this problem? Any idea how to fix or circumvent this issue?
Thanks in advance.
There is if you can spell labels correctly !!
Is there a way to have a “dynamic” graph_span
?
When chargin my car this graph is shown (conditional card). When it has been chargin overnight the 12 hour span makes sense but if I only charge for 3 hours it looks a bit weird. Any ideas?
Hi, i notice a strange behaviour across multiple devices in the graph. I have a monthly aggregated view an started recording data in march 2023.
Looking at my desktop-pc in chrome it looks as foolows:
In homeassistant-app on my iphone the first month is missing.
In a browser (chrome) on a third device partial data is missing:
I think there is a rendering issue because of the data exists in homeassistant-db. I have similar graphs aggregating on a weekly base - the data of march is missing also. Therefore i dont think it relates to the span-periods 6month etc.
I noticed the difference in x-axis-values which leads me to the formatting code. Removing the code did not change anything in displaying march-data.
Does anybody noticed a similar issue?
Best regards,
chrclaus
My configuration is:
type: custom:apexcharts-card
apex_config:
chart:
stacked: true
tooltip:
enabled: true
theme: light
style:
fontsize: 6px
onDatasetHover:
highlightDataSeries: true
x:
show: false
format: MMM yyyy
formatter: |
EVAL:function(value) {
const array_list = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez']
const unixts = value;
var date = new Date(unixts);
date.setDate(date.getDate() + 2);
var syear = date.getFullYear();
var result = array_list[date.getMonth()] + ' ' + syear;
return result;
}
marker:
show: true
fixed:
enabled: false
position: topRight
offsetX: -10
offsetY: 0
update_interval: 1d
graph_span: 6month
span:
end: month
show:
last_updated: true
header:
show: true
title: Energie-Übersicht (Monat)
show_states: true
colorize_states: true
series:
- entity: sensor.energy_e3dc_wallbox
type: column
name: Wallbox
color: grey
group_by:
func: delta
duration: 1month
fill: zero
- entity: sensor.energy_grid_feed_in
type: column
name: Netzeinspeisung
color: rgb(0, 164, 206)
group_by:
func: delta
duration: 1month
fill: zero
- entity: sensor.energy_grid_usage
type: column
name: Netzbezug
color: red
group_by:
func: delta
duration: 1month
fill: zero
- entity: sensor.scb_energy_yield_total
type: column
name: Solar (Carport)
color: '#FB9900'
group_by:
func: delta
duration: 1month
fill: zero
- entity: sensor.energy_solar_production
type: column
name: Solar (Haus)
color: '#F7E900'
group_by:
func: delta
duration: 1month
fill: zero
Same “problem” here, but in other places in HA “sv-SE” is used. I don’t know if that is affecting the behavior in APEX since this is system-wide and “se” is not?
Hide it
Alright, thanks for sharing!
Hello, I would like to display the graph with monthly values over 12 months. I get minutes. How to please?
type: custom:apexcharts-card
header:
show: true
title: Achat et vente d'électricité sur 12 mois
graph_span: 12M
apex_config:
chart:
type: area
height: 400
stroke:
show: true
width: 1
curve: smooth
legend:
show: true
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 50
- 100
series:
- color: rgb(108,218,231)
entity: sensor.total_energy_mensuel
name: Achat d'électricité
float_precision: 2
type: column
group_by:
func: sum
duration: 1M
show:
datalabels: true
- color: rgb(163,229,113)
entity: sensor.vente_surplus_mois
name: Vente d'électricité
float_precision: 2
type: column
group_by:
func: sum
duration: 1M
show:
datalabels: true
for as far as I know, grouping by month is not (yet?) supported
Tried the same and ended up grouping by 30 days which isn’t optimal.