Setup:
For new people setting this up, the instructions are slightly wrong.
STEP 2 HERE:
2. Navigate to Configuration → Lovelace Dashboards → Resources Tab. Hit orange (+) icon
SHOULD BE THIS:
That’s where the resources management tab can be found.
Is it possible to only show the datalabels, when the value’s are greater dan 0?
I tried with the formatter, but doens’t work.
This will work.
formatter: EVAL:function(val) { if (val != 0) { return val; } else { return ''; } }
Indeed it worked, At first I did placed it on the series datalabels section.
I guess that is only to activate it.
Now placed in the main config section, it works.
Thanks
Does anyone know why this happens to my graph, it’s related to the span property.
If I remove it, it works as it should. But then I don’t get the forward prices.
This is the series that gets messed up.
- entity: sensor.last_meter_consumption_osthammar
yaxis_id: kWh
type: column
name: Usage
color: '#932bd9'
float_precision: 1
stroke_width: 2
group_by:
func: diff
duration: 1h
This is my card in total.
type: custom:vertical-stack-in-card
cards:
- type: custom:mini-graph-card
align_state: center
name: Electricity
decimals: 1
entities:
- entity: sensor.electricity_price_total
show:
icon: false
graph: false
- type: custom:apexcharts-card
cache: false
now:
show: true
color: red
graph_span: 2day
# span:
# offset: +1day
hours_12: false
all_series_config:
type: area
extend_to: false
yaxis:
- id: SEK
min: 0
apex_config:
tickAmount: 5
- id: Heater
min: 0
max: 1
show: false
apex_config:
tickAmount: 5
- id: kWh
min: 0
max: 10
show: false
apex_config:
tickAmount: 5
apex_config:
chart:
type: area
height: 300
legend:
show: false
tooltip:
x:
format: dddd HH:00
xaxis:
type: datetime
labels:
datetimeFormatter:
month: ddd
day: ddd
tooltip:
enabled: false
fill:
type: solid
opacity: 0.2
series:
- entity: binary_sensor.run_heater
yaxis_id: Heater
name: Heater
color: '#777'
stroke_width: 0
curve: stepline
group_by:
func: max
duration: 1h
transform: 'return x == "off" ? 0 : 1;'
- entity: sensor.run_heater_when
yaxis_id: Heater
name: Heater
color: '#777'
stroke_width: 0
curve: stepline
data_generator: |
let today = new Date();
let currentHour = today.getHours();
let todayData = entity.attributes.heater
.filter(p => new Date(p.startsAt).getHours() >= currentHour)
.map(p => {
let when = new Date(p.startsAt);
when.setHours(when.getHours());
return [when, p.value];
});
return todayData;
- entity: sensor.last_meter_consumption_osthammar
yaxis_id: kWh
type: column
name: Usage
color: '#932bd9'
float_precision: 1
stroke_width: 2
group_by:
func: diff
duration: 1h
- entity: sensor.electricity_price_total
yaxis_id: SEK
name: Electricity
curve: stepline
color: '#2b76d9'
stroke_width: 2
float_precision: 2
fill_raw: last
- entity: sensor.tibber_prices
yaxis_id: SEK
name: Electricity Forward
stroke_width: 2
curve: stepline
color: '#2b76d9'
float_precision: 2
data_generator: >
var items = []; var gridFees =
parseFloat(hass.states['input_number.electricity_grid_fees'].state);
var now = new Date();
now.setHours(now.getHours() - 1);
entity.attributes.today.forEach((p) => {
items.push([new Date(p.startsAt), p.total+gridFees]);
});
entity.attributes.tomorrow.forEach((p) => {
items.push([new Date(p.startsAt), p.total+gridFees]);
});
return items.filter((item) => {
return item[0] > now;
});
To help debug your problem, first remove these lines.
all_series_config:
type: area
extend_to: false
and add them correctly to the individual series.
Note:- extend_to only applies to line/area types.
OK, now remove all series except this one and ensure it is working correctly.
- entity: sensor.last_meter_consumption_osthammar
Once it is working correctly, add the other series to it, one by one, assuming that each added series is working correctly.
Turns out this series is casing the issue:
- entity: binary_sensor.run_heater
yaxis_id: Heater
name: Heater
color: '#777'
stroke_width: 0
curve: stepline
group_by:
func: max
duration: 1h
transform: 'return x == "off" ? 0 : 1;'
Could it be that the binary_sensor.run_heater actually do not have any value for the give period?
How would I go about doing this in a smarter way?
You could try “fill_raw” within the binary_sensor.run_heater series.
Unfortunately that didn’t change anything. So what I need is to know the last state of that sensor if there is no valid data for the period. Would that be possible to achive with a data_generator somehow?
Which value did you use with the fill_raw option ?
‘last’ and ‘zero’
I’m looking for a way to add somekind of “marker” in my chart. My chart is build up with 1 sensor displaying my diabetic info about insulin, and I would like to use a sensor called: sensor.last_meal_marker (this contains a date) to make a Marker in the cart with a dot or something on that specific date/time. The chart spans only 24 hours.
The sensor for the meal marker contains: 2023-05-01T11:28:00+00:00 as a status, and device_class is timestamp.
Is there any workaround to define the number of ticks on the xaxis? Documentation says it doesn’t work when xaxis is a datetime.
Finding the right time fro a column is a bit fiddley and the tooltip isn’t as reliable as I want / a bit hard to read.
Another question, I have to define the locale setting to all my charts to have them show local month names instead of english (as seen above). According to this it should follow how HA is set up. Home Assistant is configured correctly with my country and language. Any idea why it doesn’t use that setting?
Apexcharts supports the following languages. If your language is not listed, they use English. If your language is not present, open an issue.
My language is listed (Swedish) and when I add locale: se it works fine, but it would have been nice if it pulled the setting from HA so I don’t have to specify the locale everywhere. But it’s a small issue tbh 
