Hi all, is there anyway of changing the fontsize of the extrema objects on a graph?
Thanks,
Mat
Yes, you can do that. Here’s an example of my least favorite chart !!
Great tip. Works fine. Thank you very muc 
You can also add a total to your tooltip for the yaxis part by adding the following code.
Note, increase the array_list to 5 (5 series) and change the text to match each series name.
'y':
formatter: |
EVAL:function(value, { series, seriesIndex, dataPointIndex, w }) {
const array_list = ['Electric: €','Gas: €']
let currentTotal = 0;
let detailTotal = '';
let x = 0 * 1;
series.forEach((s) => {
currentTotal += s[dataPointIndex];
detailTotal = detailTotal + array_list[x] + s[dataPointIndex].toFixed(2).replace(".", ",") + '<br>';
x++;
})
return '<div class="custom-tooltip">'+
detailTotal +
'<span><b>Total: €</b>' + currentTotal.toFixed(2).replace(".", ",") + '</span>' +
'</div>'
}
title:
formatter: |
EVAL:function(value){
value = '';
return value;
}
Thanks!
However I still have a problem. ${states['input_number.max_spotpris'].state} is converted to '0.27', a string. I tried to convert to float with ${states['input_number.max_spotpris'].state | float } but that doesn’t work. Any other way to convert to float?
Try this;
${states['input_number.max_spotpris'].state * 1}
Hello,
i use the InfluxDB integration. I want to plot a graph from the database.
I use this code, but the graph stays on loading.
type: custom:apexcharts-card
header:
show: true
title: Solar Monthly Production
show_states: false
colorize_states: true
apex_config:
chart:
height: 270
extend_to_end: false
yaxis:
min: 0
max: 100
stroke:
show: true
width: 1
legend:
show: true
graph_span: 12 month
span:
end: month
series:
- entity: sensor.influx_outside_temp
type: column
name: Monthly Production
color: green
show:
datalabels: true
group_by:
duration: 1month
data_generator: |
console.log(start); var params = new URLSearchParams({
u: "homeassistant",
p: "homeassistant",
db: "homeassistant",
q: "SELECT \"value\" FROM \"kWh\" WHERE \"entity_id\" = 'gw2000_xs_totaal_vermogen_vandaag' AND time < now()"
});
var myInit = { method: 'GET',
headers: {
'Accept': 'application/json',
},
mode: 'cors',
cache: 'default'
};
const request = async () => {
var result = [];
const response = await fetch('192.168.2.19:8086/query?' + params, myInit)
const json = await response.json();
if (json["results"] && json["results"][0] && json["results"][0]["series"] && json["results"][0]["series"][0] && json["results"][0]["series"][0]["values"]) {
for(var val of json["results"][0]["series"][0]["values"]) {
result.push([new Date(val[0]), val[1]]);
}
} else {
console.log("error: " + json)
}
console.log("return: " + json)
return result;
} return request();
update_interval: 1m
I don’t know the exact output of the url but if i use:
192.168.2.19:8086/query?db=homeassistant&q=SELECT+“value”+FROM+“kWh”+WHERE+“entity_id”+=+‘gw2000_xs_totaal_vermogen_vandaag’
I get this data:
{“results”:[{“statement_id”:0,“series”:[{“name”:“kWh”,“columns”:[“time”,“value”],“values”:[[“2023-02-21T22:00:00Z”,0.9],[“2023-02-22T22:00:00Z”,2.8],[“2023-02-28T16:46:30.299409Z”,7]]}]}]}
Sorry i don’t see any code … maybe you forgot to read first Topic, in regards to presenting
code
I can see the code, only the ‘’’ doesn’t work like expected.
( ``` ) because it’s back-ticks you should use
Thanks, i think this looks better.
hmmmm, and what outcome do you expect ? … a graph of sum: of all days, sorted in month , and span 12 month ?
For now i have daily data, so for now every day a bar is fine. Maybe there are some things showings months, but if i have a graph, i will fix it.
??? montly production, duration month, end month grap_span 12 month,
Solar Monthly Production … yeah, some thing showing months, for sure
I have tried many things, this is the default code for me.
Snyggt!
Would you mind sharing that one?
Hey everyone,
I’m trying to have a chart combined with area filled with a gradient and line.
Unfortunately only same entites are shown with gradients. Others don’t. See below: The third chart (PV-Power) isn’t shown as a gradient, the green one is.
Does anyone know a solution? Would be very happy 
Here is my config:
type: custom:apexcharts-card
graph_span: 24hours
header:
show: false
title: xyz
show_states: false
colorize_states: true
series:
- entity: sensor.verbrauch
name: Eigenverbrauch
color: green
float_precision: 0
yaxis_id: eigenverbrauch
type: area
- entity: sensor.myenergi_mein_zuhause_power_import
color: DodgerBlue
float_precision: 0
name: Netzbezug
type: area
- entity: sensor.myenergi_mein_zuhause_power_export
name: Einspeisung
yaxis_id: einspeisung
color: Purple
float_precision: 0
type: area
- entity: sensor.pv_power_total
name: PV
yaxis_id: pv
color: Orange
type: area
- entity: sensor.battery_charge_power
name: Aufladen
color: Pink
yaxis_id: aufladen
float_precision: 0
type: area
- entity: sensor.battery_discharge_power
name: Entladen
color: Turquoise
yaxis_id: entladen
float_precision: 0
type: area
opacity: 0.3
- entity: sensor.gosungrow
name: SOC
color: black
float_precision: 0
yaxis_id: SOC
type: line
opacity: 1
all_series_config:
show:
extremas: false
group_by:
func: avg
duration: 4m
apex_config:
chart:
type: area
height: 600
stroke:
show: true
lineCap: square
width: 2
show:
extremas: true
legend:
show: true
dataLabels:
enabled: true
yaxis:
- id: eigenverbrauch
show: true
showAlways: true
showForNullSeries: true
reversed: false
tickAmount: 7
decimalsInFloat: 0
opposite: false
min: 0
max: 7000
- id: netzbezug
show: false
opposite: false
min: 0
max: 7000
- id: einspeisung
show: false
opposite: false
min: 0
max: 7000
- id: pv
show: false
opposite: false
min: 0
- id: aufladen
show: false
opposite: false
min: 0
max: 7000
- id: entladen
show: false
opposite: false
min: 0
max: 7000
- id: SOC
show: true
showAlways: true
showForNullSeries: true
reversed: false
tickAmount: 10
decimalsInFloat: 0
forceNiceScale: true
floating: false
opposite: true
min: 0
max: 100
fill:
type:
- gradient
- solid
gradient:
type: vertical
shadeIntensity: 0.8
inverseColors: false
opacityFrom: 0.6
opacityTo: 0.3
stops:
- 0
tooltip:
x:
format: HH:mm
hey guys, im in to apex card and i like it.
- As i have it now for example my offpeak tariff is 23:00 - 7:00. Apex card shows offpeak info on 0:00-7:00 when offpeak is over at 7:00 (146kWh) and i want it to show my full offpeak info (172 kWh)
my code looks this way now
- type: vertical-stack
cards:
- type: custom:apexcharts-card
header:
show: true
title: Day tariff
graph_span: 14d
yaxis:
- min: 0
series:
- entity: sensor.main_counter_data_daily_peak
group_by:
func: diff
duration: 1d
statistics:
period: hour
type: sum
align: start
type: column
color: '#7b99b5'
span:
start: day
offset: '-13d'
you r missing this
Dejavue , haven’t ive seen this post resently ( few days ago) somewhere else ?
Anyway, A day goes from 00.00 to 23.59, so don’t expect that you “just like that” , will see yesterday consumption, in todays
what you see in your “History-line-graph” is what it is ( A line-graph )
SO what you need is to collect/summarize ,00.00>07.00 + 23.00>23.59 ( you have 2 daily peak periods )
Another question is:
Is " Main counter data Daily offpeak" the same as " sensor.main_counter_data_daily_peak " ?
Why do i get a feeling that you show half of what you are trying to accomplice ?