Never mind the data set. I got it working with joining the objects in the array with the concat function:
var output = entity.attributes.today.concat(entity.attributes.tomorrow);
return output.map((item) => {
return [new Date(item.startsAt), item.total]
I’m trying to achieve something similar based on a weather entity. What I would like to display:
The graph spans 14 days (7 in the past, 7 in the future), and the idea would be to set temp forecast high to noon and temp forecast low to midnight, as well as join the temperature history (currently grouped by 2h average) via the data generator.
At the moment, I have the following for temp forecast high:
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.temperature];
});
This works perfectly, based on the following data from the weather entity (Openweathermap, one such entry per day in the forecast):
forecast:
- datetime: '2021-12-05T11:00:00+00:00'
precipitation: 7.57
precipitation_probability: 100
pressure: 1005
wind_speed: 5.88
wind_bearing: 234
condition: snowy-rainy
clouds: 100
temperature: 2.6
templow: -0.3
I’m not exactly a JS expert, so any help to get further ahead is much appreciated.
I’m using apexchart to show energy price and grid tariffs for today and tomorrow. The following code works well:
series:
- entity: sensor.nordpool_kwh_oslo_nok_3_10_025
name: Kraftpris
type: line
curve: stepline
float_precision: 3
extend_to_end: false
show:
legend_value: false
data_generator: |
return entity.attributes.raw_today.map((entry) => {
return [new Date(entry.start), entry.value];
});
- entity: sensor.nordpool_kwh_oslo_nok_3_10_025
name: Kraftpris
type: line
curve: stepline
float_precision: 3
color: blue
extend_to_end: false
show:
legend_value: false
data_generator: |
return entity.attributes.raw_tomorrow.map((entry) => {
return [new Date(entry.start), entry.value];
});
- entity: sensor.nettleie_hjemme_nede_forbruksledd
name: Nettleie forbruksledd
type: line
curve: stepline
float_precision: 3
extend_to_end: false
show:
legend_value: false
data_generator: |
return entity.attributes.raw_today.map((entry) => {
return [new Date(entry.start), entry.value];
});
- entity: sensor.nettleie_hjemme_nede_forbruksledd
name: Nettleie forbruksledd
type: line
curve: stepline
float_precision: 3
color: blue
extend_to_end: false
show:
legend_value: false
data_generator: |
return entity.attributes.raw_tomorrow.map((entry) => {
return [new Date(entry.start), entry.value];
});
I would like to show the sum of the two as well (since that is, in the end, what I’m going to have to pay in total). Is there a way to add the energy price (“kraftpris”) and grid tariff (“nettleie”) directly in the chart, or should I rather set up another sensor for the sum?
Hi all,
please , can somebody explain me, how can I setup bar chart with day energy consumption?
From entity I can get total consumption and I think, i must use transform to compute consumption difference for every day.
Thank you a lot
type: 'custom:apexcharts-card'
graph_span: 31d
update_interval: 1hour
cache: true
span:
end: day
header:
title: Hot water
show: true
show_states: true
colorize_states: true
apex_config:
xaxis:
labels:
format: dd
show: true
showAlways: true
yaxis:
forceNiceScale: false
decimalsInFloat: 0
chart:
type: area
height: 300
stroke:
show: true
width: 1
legend:
show: false
dataLabels:
enabled: false
distributed: true
fill:
type: fill
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
series:
- entity: sensor.shelly1pm_e8db84d27644_energy
transform: return x ;
type: column
name: HW
float_precision: 1
group_by:
func: last
duration: 1d
I have the same problem. A dashbord with a lot of apexcharts cards, and it turned even slower with the latest update…
Any solutions to this?
Here is my solution for a bar chart with day energy consumption derived from a total consumption sensor:
What I’m still struggeling with, is floating daily consumption average line in the same graph.
You might want to add this to manipulate the font size of the status values:
style: |
ha-card {
font-size: 20px;
}
They do work. Did you enable the experimental feature?
You need to edit the legend part also.
For 1. use card-mod
For 2. datalabels are to be set in show for each series.
Not possible for 1 entity unfortunately, that’s a limitation of the library I use.
You can use as_duration from the documentation. But if I remember correctly, it doesn’t apply to the datalabels (that is something I can add)
You should be able to use EVAL for that (check the documentation). I don’t remember if the hass object is available though… I’d need to check further.
You can use card-mod for that
No trick unfortunately, that’s how the library works 
Please open a GH issue if you didn’t fix it 
I’m not sure I understand what the issue is. Not that if there are gaps in the values (ie. some values are null, then color_threshold doesn’t work well.)
try this:
return entity.attributes.forecast.flatMap((entry) => {
let noon = new Date(entry.datetime).setHours(12, 0, 0, 0);
let midnight = new Date(entry.datetime).setHours(23, 59, 59, 99);
return [[new Date(noon).getTime(), entry.temperature], [new Date(midnight).getTime(), entry.templow]];
});
Use a sensor instead
Can you please share your code for this one. It seems the example on the Github page for the HNT component. doesn’t work anymore as y_axis_precision: is depreciated. Thanks.
Works perfect for the forecast, thank you very much! Any way of adding temperature history with 2h avg to this data generator?
Data generator doesn’t have access to the history so that is not possible.
Is there a way to calculate the tickAmount value?
When I have more than one y-axis, the min value is allways set to 0. Therefore I experiment calculating that value by my own. my example sets the min to next 1.000 below and the max to the next 1.000 above the real values.
What I would like to to is something like set the tickAmount to the number of 1.000 between min and max.
min: EVAL:min => 1000 * Math.floor(min/1000)
max: EVAL:max => 1000 * (1+Math.floor(max/1000))
tickAmount = (max - min)
But even with evaluating a constant value it does not show the graph.
tickAmount: EVAL:tickAmount => 5
I was afraid of that! I’ll poke around with the regular graph options, see if I can avoid the overlap between forecast and history that I’m currently having.
Thank you @RomRider .
I will need to look into Cardmodder then.
@all: does anybody know if it is possible to display overlapping series with a small x-axis shift?
I have an Oven Entity I’m trying to graph where there are several attributes. Basically I want the “set” temp ‘temperature’ and current temp ‘current_temperature’ graphed over the past 4 hours. I can’t find a way to add 2 attributes to a graph… one works fine.
type: custom:apexcharts-card
graph_span: 4h
all_series_config:
stroke_width: 2
header:
show: true
title: Current Oven Temp
show_states: true
colorize_states: true
series:
- entity: water_heater.oven
attribute:
current_temperature
these are my attributes of my oven entity (why its a water_heater.oven entity is beyond me)
water_heater.oven:
min_temp: 170
max_temp: 550
operation_list: Off, Conv. Multi-Bake, Convection Bake, Bake, Air Fry, Convection Roast
current_temperature: 338
temperature: 350
target_temp_high: null
target_temp_low: null
operation_mode: Bake
display_state: Bake
probe_present: false
display_temperature: 350
raw_temperature: 338
cook_time_elapsed: 0:08
icon: mdi:stove
friendly_name: Oven
supported_features: 3
Update: For those having the same question, RomRider’s suggestion works great:
type: custom:apexcharts-card
graph_span: 4h
all_series_config:
stroke_width: 2
header:
show: true
title: Current Oven Temp
show_states: true
colorize_states: true
series:
- entity: water_heater.oven
attribute: current_temperature
- entity: water_heater.oven
attribute: temperature
Jeff
Hi! I tried searching for it, but I can’t find the right stacked type setup for what I want.
I’m trying to replicate something like this, to get a view per hour what device consumed most energy:
Any helpful hints?
Add a second serie with the same entity and the second attribute.
Not sure I get the question but…
type: custom:apexcharts-card
stacked: true
series:
- entity: abc
type: column
- entity: efg
type: column
Thanks for that tip. It works and yes it is not showed in the datalabels (so I have hide them there).
But I have still one issue. I have the option as_duration set to hour.
What I actually want is to have only display: …h …m
So only the hours and minutes and no seconds and no milliseonds.
Is that possible?
First, thank you for a fantastic card! In not much time at all I was able to setup some nice figures.
I was wondering if anyone has figured out how to do custom annotations? I would like to create a graph like this one where wind direction is plotted as an annotation on top of wind speed:
Based on this example, something like that should be possible in the base library, but I’m not sure it’s possible to do programmatic annotations like that through the card. Anyone have any tricks or is this just feature request #209?
Finally, I got it working!
Thanks @RomRider for an excellent card with great usability 
This is what I got so far, total energy consumed on yellow line, breakdown on device level in stacked barchart.
type: custom:apexcharts-card
graph_span: 1d
span:
start: day
header:
show: false
stacked: true
update_interval: 5min
all_series_config:
type: column
group_by:
func: diff
duration: 60min
series:
- entity: sensor.accumulated_consumption_skjelinveien_12a
type: line
extend_to_end: false
name: Total
group_by:
func: diff
duration: 60min
- entity: sensor.energiforbruk_vvb
name: VVB
- entity: sensor.energiforbruk_vp
name: Varmepumpe
- entity: sensor.energiforbruk_varme_vaskerom
name: Varme vaskerom