Hi, would You share how You have created the sensor.*_energy sensors? And that hourly graph is very nice, would like to look at that as well. Thanks.
Max and average of 3 sensors
Does anyone know if I could graph the maximum of three sensors for each data point IN Apex charts
And plot the the average of 3 different sensors IN Apex charts
(I can do it with a template sensors in HA, but if I can do it in the chart that would be better for my scenerio.)
Thanks for reading
hey guys,
I have not yet found out how I can increase the font size of the displayed values in the upper area and how I can change the font of the axis labeling?
Then I miss the unit on the Y axis?
do you have a tip for me, I didn’t get any further on github.
Greeting Andi
[SOLVED]
Hi there,
this is an awesome card, thx very much @RomRider.
This is what I have so far:
And I have few questions, I couldn’t find an answer so far:
- I want to have the value of each column there but it shows only on two. Someone an idea why?
- How do I get those values without colored background?
- Is there a way to get the top edges of the column rounded, like in the standard graphs of HA?
thx,
zavjah
Dear all,
this is my first experience with ApexCharts and I’m pround of what I have done so far but now I need your help.
I’m trying to create a nice energy dashboard.
This is what I have done so far:
type: custom:apexcharts-card
header:
show: true
title: Bilancio Energia
show_states: true
colorize_states: true
chart_type: donut
series:
- entity: sensor.myenergi_hub_20007605_grid_import_today
name: Importata
color: red
- entity: sensor.myenergi_hub_20007605_green_consumed_today
name: Green Consumata
color: green
- entity: sensor.myenergi_hub_20007605_grid_export_today
name: Esportata
color: yellow
apex_config:
plotOptions:
pie:
startAngle: -130
endAngle: 130
legend:
show: false
dataLabels:
enabled: true
style:
fontSize: 18px
Now I would like to add two additional donuts concentrics to the first one to summarise the total Energy Consumed and the Total Energy Produced.
Is it possible?
eventualy without to show the black portion of these two additional donuts.
Thanks for your support
Hi guys, could you advise how to create same sensor as in example: GitHub - RomRider/apexcharts-card: 📈 A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant
Thanks!
Hi foraster,
have you found a way to do it?
Maybe this ?
Hi Holdrstmade,
do you believe it could be done also to the below type of chart?
I have tried but it doesnt work
type: custom:apexcharts-card
header:
show: true
title: Bilancio Energia
show_states: true
colorize_states: true
chart_type: donut
series:
- entity: sensor.myenergi_hub_20007605_grid_import_today
name: Importata
color: red
- entity: sensor.myenergi_hub_20007605_green_consumed_today
name: Green Consumata
color: green
- entity: sensor.myenergi_hub_20007605_grid_export_today
name: Esportata
color: yellow
apex_config:
dataLabels:
enabled: true
style:
fontSize: 10px
dropShadow:
enabled: false
formatter: |
EVAL: function (value, opt) {
return opt.w.config.labels[opt.seriesIndex] + ": " + opt.w.config.series[opt.seriesIndex].toFixed(0) + " " + " W" ;
}
plotOptions:
pie:
startAngle: -130
endAngle: 130
legend:
show: false
pie:
donut:
size: 40%
dataLabels:
minAngleToShowLabel: 0.5
labels:
show: true
total:
show: true
label: Total
formatter: |
EVAL:function(w) {
return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(0) + " W"
}
Any help on this?
Hello, would it be possible:
- Show sum of column on mouse hover?
- Hide the date and time tab when the another one is already shown
Thanks!
type: custom:apexcharts-card
header:
show: true
show_states: true
colorize_states: true
graph_span: 2d
span:
start: day
now:
show: true
label: Teď
series:
- entity: sensor.current_spot_electricity_buy_price
name: Celková cena
color: black
show:
in_header: raw
in_chart: false
float_precision: 2
- entity: sensor.cena_tarifu
type: column
name: Cena tarifu
color: green
float_precision: 2
group_by:
func: sum
duration: 1hour
data_generator: |
return entity.attributes.datum.map((peak, index) => {
return [new Date(peak).getTime(), entity.attributes.hodnota[index] * 1.21];
});
- entity: sensor.current_spot_electricity_price
type: column
color: orange
name: Spot
float_precision: 2
group_by:
func: sum
duration: 1hour
show:
in_header: before_now
data_generator: |
return Object.entries(entity.attributes).map(([date, value], ) => {
return [new Date(date).getTime(), value* 1.21];
});
stacked: true
apex_config:
legend:
show: false
No I didn’t, still comparing the meters with two cards side-by-side
Hi everyone,
this is how I solved it:
type: custom:apexcharts-card
graph_span: 10d
span:
end: day
show:
last_updated: true
header:
show: true
title: Playstation-Spielzeit
show_states: true
colorize_states: true
apex_config:
chart:
type: area
height: 225
stroke:
show: true
width: 1.5
xaxis:
labels:
format: dd.MM
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 0.9
dataLabels:
background:
borderWidth: 0
opacity: 0
foreColor: white
style:
fontSize: 11px
formatter: |
EVAL:function(value) {
// Check sign of given number
var number = value
var sign = (number >= 0) ? 1 : -1;
// Set positive value of number of sign negative
number = number * sign;
// Separate the int from the decimal part
var hour = Math.floor(number);
var decpart = number - hour;
var min = 1 / 60;
// Round to nearest minute
decpart = min * Math.round(decpart / min);
var minute = Math.floor(decpart * 60) + '';
// Add padding if need
if (minute.length < 2) {
minute = '0' + minute;
}
// Add Sign in final result
sign = sign == 1 ? '' : '-';
// Concate hours and minutes
time = sign + hour + ':' + minute;
return time;
// source: https://speedysense.com/convert-float-to-time-in-javascript/
}
plotOptions:
bar:
borderRadius: 3
columnWidth: 80%
dataLabels:
position: bottom
tooltip:
x:
format: dd. MMMM 'yy
series:
- color: steelblue
entity: sensor.playtime_ps5
type: column
group_by:
func: last
duration: 1d
show:
datalabels: true
as_duration: hour
Hello everyone,
following @RomRider’s advice (see #802), I have created vertical lines for sunrise and sunset using the config-template-card.
Since the chart continuously shows the last 25 hours, I have not only integrated the sunrise / sunset lines of the current day (today), but also those of the previous day (yesterday).
However, the chart also includes events that lie just outside the chart span. For example, sunsets on the right-hand side that are about one hour in the future (and therefore not in the chart), or yesterday’s events that are already 26 hours in the past (in a 25h chart), which cross my y-axis on the left side…
Is there a way to prevent these events from being drawn outside the actual chart span?
Here is my code and two screenshots of what it looks like. (P.S. The curve shows the outside temperature, the blue bars in the background show rain phases).
Thanks for any suggestions,
Hannah
type: custom:config-template-card
entities:
- sensor.sunset
- sensor.sunrise
- sensor.sunset_yesterday
- sensor.sunrise_yesterday
- sensor.esp_garagendach_temperatur_auen_1
- switch.shelly_plus1_regenmelder
card:
type: custom:apexcharts-card
graph_span: 25h
span:
end: hour
header:
title: Außentemperatur
show: true
show_states: true
colorize_states: true
yaxis:
- id: first
decimals: 0
apex_config:
tickAmount: 4
- id: second
opposite: true
show: false
series:
- entity: sensor.esp_garagendach_temperatur_auen_1
yaxis_id: first
curve: smooth
name: Außentemperatur
unit: °C
stroke_width: 3
fill_raw: last
group_by:
func: avg
duration: 5min
show:
name_in_header: false
- entity: switch.shelly_plus1_regenmelder
transform: 'return x === ''on'' ? 1 : 0;'
yaxis_id: second
curve: stepline
stroke_width: 0
opacity: 0.2
type: area
show:
in_header: false
apex_config:
legend:
show: false
annotations:
xaxis:
- x: ${new Date(states['sensor.sunrise'].state).getTime()}
label:
text: >-
${"☀️ " + new Date(new
Date(states['sensor.sunrise'].state).getTime()).toLocaleTimeString([],{hour:'2-digit',
minute:'2-digit'})}
borderWidth: 0
style:
background: '#0000'
- x: ${new Date(states['sensor.sunset'].state).getTime()}
label:
text: >-
${"🌙 " + new Date(new
Date(states['sensor.sunset'].state).getTime()).toLocaleTimeString([],{hour:'2-digit',
minute:'2-digit'})}
borderWidth: 0
style:
background: '#0000'
- x: ${new Date(states['sensor.sunrise_yesterday'].state).getTime()}
label:
text: >-
${"☀️ " + new Date(new
Date(states['sensor.sunrise_yesterday'].state).getTime()).toLocaleTimeString([],{hour:'2-digit',
minute:'2-digit'})}
borderWidth: 0
style:
background: '#0000'
- x: ${new Date(states['sensor.sunset_yesterday'].state).getTime()}
label:
text: >-
${"🌙 " + new Date(new
Date(states['sensor.sunset_yesterday'].state).getTime()).toLocaleTimeString([],{hour:'2-digit',
minute:'2-digit'})}
borderWidth: 0
style:
background: '#0000'
xaxis:
tickAmount: 5
labels:
format: HH
1 Like
Thanks for inspiration, which integration are you using to get the sunsets and sunrises pls?
I use a separate integration that provides the corresponding sun sensors. This makes more possible than with the internal sun integration:
ha-sun2
However, a lot of information is created as attributes in the sensors provided. For the sake of simplicity, I have created my own sensor (sensor.sunset_yesterday) from one of the attributes (sensor.sunset > attribute “yesterday”)
Hmm it seems I am not able to get those nice annotations there. When doing changes in the card I can see them blink on the left side somewhere in the middle horizontally 
type: custom:config-template-card
entities:
- sensor.sunset
- sensor.sunrise
- sensor.current_spot_electricity_buy_price
- sensor.current_spot_electricity_price
- sensor.cena_tarifu
card:
type: custom:apexcharts-card
header:
show: true
show_states: true
colorize_states: true
graph_span: 2d
span:
start: day
now:
show: true
label: Teď
series:
- entity: sensor.current_spot_electricity_buy_price
name: Celková cena
color: black
show:
in_header: raw
in_chart: false
float_precision: 2
- entity: sensor.cena_tarifu
type: column
name: Cena tarifu
color: green
float_precision: 2
group_by:
func: avg
duration: 1hour
show:
in_header: before_now
data_generator: |
return entity.attributes.datum.map((peak, index) => {
return [new Date(peak).getTime(), entity.attributes.hodnota[index] * 1.21];
});
- entity: sensor.current_spot_electricity_price
type: column
color: orange
name: Spot
float_precision: 2
group_by:
func: avg
duration: 1hour
show:
in_header: before_now
data_generator: |
return Object.entries(entity.attributes).map(([date, value], ) => {
return [new Date(date).getTime(), value* 1.21];
});
stacked: true
apex_config:
legend:
show: false
annotations:
xaxis:
- x: ${new Date(states['sensor.sunrise'].state).getTime()}
label:
text: >-
${"☀️ " + new Date(new
Date(states['sensor.sunrise'].state).getTime()).toLocaleTimeString([],{hour:'2-digit',
minute:'2-digit'})}
borderWidth: 0
style:
background: '#0000'
- x: ${new Date(states['sensor.sunset'].state).getTime()}
label:
text: >-
${"🌙 " + new Date(new
Date(states['sensor.sunset'].state).getTime()).toLocaleTimeString([],{hour:'2-digit',
minute:'2-digit'})}
borderWidth: 0
style:
background: '#0000'
Did you finetune this already ?