Proud of myself for working out how to link to UK Met Office weather data using Node Red, creating a sensor in HA and displaying a chart on my dashboard using Apex Charts. Only took me 5 minutes.
My chart needs refinement. The X axis shows a rolling 48 hours - showing labels every 3rd hour. Is there a way to highlight each midnight so today / tomorrow / next day are immediately obvious?
And/or: I have a ‘brush’ - brilliant feature - but if I show 24 hours as a default, it shows the last 24 hours rather than first. Is there a simple way to change this? I think some clever people have written work-around code to achieve this, probably a bit complex for me.
Did I say all this took me 5 mins? Typo - meant 5 weeks.
Any advice very much appreciated.
Here’s pic of my chart:
Here’s my chart yaml:
type: custom:apexcharts-card
experimental:
color_threshold: true
brush: true
show:
loading: true
last_updated: true
graph_span: 2d
brush:
selection_span: 2d
span:
start: hour
header:
title: Risk of Rain
show: true
yaxis:
- id: Probability
show: true
opposite: false
min: 0
max: ~20
decimals: 0
apex_config:
stepSize: 5
- id: Amount
show: true
opposite: true
min: 0
max: ~2
apex_config:
stepSize: 0.5
apex_config:
xaxis:
labels:
format: HH
grid:
show: true
xaxis:
lines:
show: true
series:
- entity: sensor.forecast
name: < Feels like C
yaxis_id: Probability
data_generator: |
return entity.attributes.attributes.datetime.map((time, index) =>
{return[new Date(time).getTime(),
entity.attributes.attributes.feelslike[index]]});
color: red
opacity: 1
stroke_width: 1
type: line
show:
legend_value: false
in_brush: true
- entity: sensor.forecast
name: < Probability %
yaxis_id: Probability
data_generator: |
return entity.attributes.attributes.datetime.map((time, index) =>
{return[new Date(time).getTime(),
entity.attributes.attributes.rainprob[index]]});
color_threshold:
- value: 0
color: yellow
- value: 25
color: green
- value: 50
color: blue
opacity: 1
stroke_width: 2
type: line
show:
legend_value: false
in_brush: true
- entity: sensor.forecast
name: Amount mm >
yaxis_id: Amount
data_generator: |
return entity.attributes.attributes.datetime.map((time, index) =>
{return[new Date(time).getTime(),
entity.attributes.attributes.rainamount[index]]});
color: turquoise
opacity: 0.2
stroke_width: 1
type: area
show:
legend_value: false
in_brush: true
