Hi,
I’m working on some somehow complex Apex Chart Card… It should show me the forecast for Tibber pricing, solar production and the actual generated solar power. This is how the chart looks like at the moment:
I have 3 challenges:
1.) The tooltip is only showing one series, not all
2.) The horizontal lines showing up for empty values for the future (for the tibber price and the actual power generated
3.) The legend showing values I can’t understand and I would like to get rid of.
ChatGPT/Copilot helped already a lot but these challenges it’s not able to fix. So I’m betting now on human intelligence instead of artificial 
Anyone out there who can help me with that?
Here’s the actual code:
type: custom:apexcharts-card
header:
show: true
show_states: true
graph_span: 3d
span:
start: day
now:
show: true
apex_config:
chart:
height: 300
stroke:
width: 2
tooltip:
enabled: true
shared: true
intersect: false
x:
show: true
format: dd MMM HH:mm
followCursor: true
legend:
show: true
showForSingleSeries: true
showForNullSeries: true
showForZeroSeries: true
annotations:
yaxis:
- "y": 0
borderColor: "#999"
label:
text: ct/kWh
style:
background: "#fff"
color: "#000"
fontSize: 12
position: left
- "y": 0
borderColor: "#999"
label:
text: kWh
style:
background: "#fff"
color: "#000"
fontSize: 12
position: right
yaxis:
- id: pv_axis
min: 0
opposite: true
decimals: 1
- id: price_axis
min: 0
opposite: false
decimals: 1
experimental:
color_threshold: true
series:
- entity: sensor.solcast_week
show:
in_header: before_now
name_in_header: true
name: PV Vorhersage
type: line
unit: kWh
color: aqua
yaxis_id: pv_axis
data_generator: |
return entity.attributes.detailedForecast.map((entry) => {
return [new Date(entry.period_start).getTime(), entry.pv_estimate];
});
- entity: sensor.tibber_prices
show:
in_header: before_now
name_in_header: true
unit: Cent/kWh
name: Tibber Preis
color: red
yaxis_id: price_axis
type: line
curve: stepline
stroke_width: 4
float_precision: 2
color_threshold:
- value: 0
color: 4DD0E1
- value: 10
color: 26A69A
- value: 15
color: 4CAF50
- value: 20
color: 7CB342
- value: 25
color: FBC02D
- value: 30
color: EF6C00
- value: 40
color: B71C1C
data_generator: >
const noon = new Date()
noon.setHours(0, 0, 0, 0)
const prices = entity.attributes.today.concat(entity.attributes.tomorrow);
return prices.map((p, i) => [noon.getTime() + i * 3600 * 1000, p.total *
100]);
- entity: sensor.pv_power_kwh
show:
in_header: raw
name_in_header: true
name: PV Erzeugung
type: area
yaxis_id: pv_axis
unit: kWh
color: gray
group_by:
func: avg
duration: 15min
THANKS!
Thomas