- entity: sensor.nordpool_kwh_nl_eur_3_10_0
attribute: current_price
color: cyan
name: Huidige uur
group_by:
duration: 1d
show:
in_chart: false
legend_value: false
yaxis_id: labels
Any idea?
Sensor issue. Look at your Nord Pool integration issues for further information.
Funny thing, today it is working again 
nordpool connectivity has been quite spotty for me as of late. In frustration I have removed using current price (+high and low) sensors and others from nordpool that get updated hourly, etc and have gone instead to extrapolating it from the daily data dump.
in apex, does anyone know if it is possible to put the current value where it says “now” (like min/max)?
is it possible to make the entity name shown on mouse hover to be shorter or even not shown:
tooltip:
y:
title:
formatter: |
EVAL: function(value) {
return value.substring(0, 8) + ': '
}
so I typically use the standard / default colors and made a table of them to access quickly which I thought someone else may have use of, so I am posting it here as i have never found this list and using text names of colors (eg “blue” or “green” ) will not give you any of the blues below but some other color palette :S – anyway :
| ID | Color | Hex | RGB |
|---|---|---|---|
| 01 | Light Orange | #FF9800 | rgb(255,152,0) |
| 02 | Light Blue | #3498DB | rgb(52,152,219) |
| 03 | Red | #E74C3C | rgb(231,76,60) |
| 04 | Light Purple | #9B59B6 | rgb(155,89,182) |
| 05 | Yellow | #F1C40F | rgb(241,196,15) |
| 06 | Green yellow | #2ECC71 | rgb(46,204,113) |
| 07 | Green blue | #1ABC9C | rgb(26,188,156) |
| 08 | Dark Gray | #34495E | rgb(52,73,94) |
| 09 | Orange | #E67E22 | rgb(230,126,34) |
| 10 | Gray | #7F8C8D | rgb(127,140,141) |
| 11 | Green | #27AE60 | rgb(39,174,96) |
| 12 | Blue | #2980B9 | rgb(41,128,185) |
| 13 | Purple | #8E44AD | rgb(142,68,173) |
| “Now” tag | lighter blue | #009AC7 | rgb(0,154,199) |
| subtext | light gray | #BABABA | rgb(186,186,186) |
| text | lighter gray | #E1E1E1 | rgb(225,225,225) |
| background | darker gray | #1C1C1C | rgb(28,28,28) |
** ## in order of entities added - 01 is the 1st entity added, 13 is the 13th @14 the colors repeat.
I use this as I like that the colors are standard as it is easy but as I have progressed I find they sometimes they are in the wrong order (eg different colors between charts for the same values on the same page) and a pain to move as things go screwy or I have some colors I have decided always mean a certain thing (eg historical data to be a light gray (10) or similarly sma’s are the same color but dashed width depending on sma span and transparent lighter version #opacity, etc, etc…).
type: custom:apexcharts-card
graph_span: 24h
hours_12: false
header:
show: true
show_states: true
colorize_states: true
span:
start: day
now:
show: true
apex_config:
tooltip:
y:
formatter: |
EVAL:(value, { seriesIndex, dataPointIndex, w }) => {
const seriesName = w.config.series[seriesIndex].name;
return seriesName.substring(0, 8) + ': ' + value.toFixed(2);
}
yaxis:
- decimals: 2
apex_config:
tickAmount: 4
series:
- entity: sensor.nordpool_kwh_fi_eur_3_095_0
float_precision: 3
type: column
show:
name_in_header: false
in_header: before_now
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"] * 100];
});
unit: snt/kWh
This does not seem to do anything, apexcharts-card doesn’t include tooltip in it’s documentation but apexcharts.js has…maybe there is no support in card?
I am constantly typing this search term in for this exact purpose “CSS Rapid Tables”
There is also a number of CSS tools and available for easy reference.
to quote myself. Curious if others have the same. In the morning values are there, in the afternoon, values seems to be N/A.
Ok I did something stupid right after waking up, but now it works thanks to your example! : ) Thank you!
I’m trying to average the values of the last 8 days for my sensor but the average is not correct:
type: custom:apexcharts-card
experimental:
color_threshold: true
header:
show: true
title: Daily Net Cost (Last 8 Days)
show_states: true
colorize_states: true
graph_span: 8d
span:
start: day
offset: "-7d"
all_series_config:
type: column
extend_to: false
float_precision: 2
series:
- entity: sensor.sql_net_daily_cost
name: 8-day Avg
group_by:
duration: 8d
func: avg
show:
in_header: true
header_color_threshold: true
in_chart: false
color_threshold:
- value: -0.01
color: limegreen
- value: 0.01
color: tomato
- entity: sensor.sql_net_daily_cost
name: Net Cost
group_by:
duration: 1d
func: last
color_threshold:
- value: -0.01
color: limegreen
- value: 0.01
color: tomato
show:
in_header: true
header_color_threshold: true
apex_config:
xaxis:
labels:
rotate: 0
format: ddd
chart:
height: 150px
yaxis:
- forceNiceScale: true
decimalsInFloat: 2
offsetX: 6
labels:
formatter: |
EVAL: function (val) {
return val >= 0 ? "$" + val.toFixed(2) : "-$" + Math.abs(val).toFixed(2);
}
tooltip:
"y":
formatter: |
EVAL: function (val) {
return "$" + (val ?? 0).toFixed(2);
}
plotOptions:
bar:
columnWidth: 90%
borderRadius: 2
legend:
show: false
- entity: sensor.sql_net_daily_cost
name: 8-days Avg
statistics:
type: mean
period: day
fill_raw: zero
group_by:
fill: zero
duration: 8d
start_with_last: true
func: last
Any help please
anyone knows how to solve apexchart with 1d span? my entity is a daily increasing utility meter, and based on my code below, i should expect a column to appear center, but instead i get a dotted value appearing on far left. what is wrong with my code?
# lovelace_gen
type: custom:apexcharts-card
header:
show: true
title: {{ chart_title }}
show_states: true
colorize_states: false
graph_span: 1d
span:
end: day
apex_config:
xaxis:
type: datetime
labels:
format: dd MMM
series:
- entity: {{ chart_entity }}
type: column
float_precision: 3
show:
extremas: true
in_header: false
group_by:
func: last
duration: 1d
Are you using a wrapper to allow templates? As this card does not (!) accept templates just-like-that, and suggest to not provide examples with guesswork on the values.
Will there be any updates on the actual card? 2.3+ have been out for a while.
regards
//Hans
Edit:
Or do anyone have a good/nice apexchart config that shows a graph on todays and tomorrows price and as numbers Lowest/actual/highest and want to share it?
This is for the core Nordpool and not the custom component…
//Hans
sorry. here is what i meant:
sensor.aircond_today_s_consumption is type total_increasing and my graph_span is a growing dynamic value. Result is not what i expect if graph_span is <= 3d.
xaxis type: category works but the formatter doesnt. In my browser’s console, i can only see value = 0.
type: custom:apexcharts-card
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
graph_span: 1d
span:
start: day
apex_config:
xaxis:
type: category
labels:
formatter:
EVAL:function(value){
console.log('function value:', value);
var date = new Date(Number(value) * 1000);
return date.toLocaleDateString('en-GB', {
day: '2-digit',
month: 'short'
});
}
series:
- entity: sensor.aircond_today_s_consumption
type: column
group_by:
func: last
duration: 1d
meanwhile xaxis type datetime is showing wrong ticks where i am only expecting 1 tick and the bar is positioned on 13 Oct not 15 Oct. The tooltip hover value is correct though.
type: custom:apexcharts-card
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
graph_span: 1d
span:
start: day
apex_config:
xaxis:
type: datetime
labels:
format: dd MMM
series:
- entity: sensor.aircond_today_s_consumption
type: column
group_by:
func: last
duration: 1d
please advise how can i get xaxis to work correctly?
tbh, I am quite surprised myself, have not seen this before. Without even setting any x-axis config, it displays 15 oct (also with me on various sensors). It is so basic in its setup so it should work. I can only get the 13th back in the picture by changing span stuff but one should be able to show only today. I even checked if this was related to recent releases of HA (almost never related but this is so weird).
I would raise an issue here; Issues · RomRider/apexcharts-card
I’ve made a chart showing daily electricity costs, profits, and net costs for the last 7 days. It does exactly what I want, but it is really slow to load.
type: custom:apexcharts-card
apex_config:
chart:
stacked: true
legend:
show: false
dataLabels:
background:
enabled: false
graph_span: 7d
span:
end: day
show:
last_updated: true
header:
show: true
show_states: true
colorize_states: true
title: Daily energy cost
experimental:
color_threshold: true
series:
- entity: sensor.electricity_meter_production_total_daily_energy_cost
name: Production
type: column
unit: €
color: "#00aef5"
opacity: 0.5
invert: true
float_precision: 2
group_by:
func: last
duration: 1d
- entity: sensor.electricity_meter_consumption_total_daily_energy_cost
name: Consumption
type: column
unit: €
color: "#707070"
opacity: 0.5
invert: false
float_precision: 2
group_by:
func: last
duration: 1d
- entity: sensor.electricity_meter_net_daily_energy_cost
name: Net Cost
type: area
stroke_width: 0
unit: €
float_precision: 2
color: black
opacity: 0.5
show:
datalabels: true
in_chart: true
group_by:
func: last
duration: 1d
extend_to: false
color_threshold:
- value: -0.1
color: "#00aef5"
- value: 0.1
color: "#707070"
Does anyone have a recommendation how to make this graph more efficient?
Thanks
Never tried a formatter function on the legend but there is an EVAL: missing before your function.