Continuing the discussion from ApexChart for Octopus Agile (etc) prices:
Has anyone done a Plotly card chart for Agile? Fed up of the ug in ApexCard that means colour threshold no longer works.
I’ve got stuck, so before I bang my head against a wall, just wondered if anyone had done it already.
Clearly not, so here is my starter for 10. Not finished, but functional.
[edit - 8/1/25]
I have updated this in GitHub Octopus Agile prices from now · dbuezas/lovelace-plotly-graph-card · Discussion #512
[original solution]
type: custom:plotly-graph
entities:
- entity: ""
name: Agile Prices
filters:
- fn: |-
({hass}) => ({
xs: hass.states['event.octopus_energy_electricity_xx_current_day_rates'].attributes.rates.map(({ start }) => (new Date(start))).concat(hass.states['event.octopus_energy_electricity_xx_next_day_rates'].attributes.rates.map(({ start }) => (new Date(start)))),
ys: hass.states['event.octopus_energy_electricity_xx_current_day_rates'].attributes.rates.map(({ value_inc_vat }) => value_inc_vat*100).concat(hass.states['event.octopus_energy_electricity_xx_next_day_rates'].attributes.rates.map(({ value_inc_vat }) => value_inc_vat*100)),
})
type: bar
xperiodalignment: start
marker:
color: |-
$ex {
let colors = [];
for (let y of ys) {
if (y < 0) {
colors.push("cyan");
} else if (y < 20) {
colors.push("green");
} else if (y < 28) {
colors.push("orange");
} else if (y < 40) {
colors.push("red");
} else {
colors.push("purple");
}
}
return colors;
}
hours_to_show: 18h
time_offset: 17.5h
refresh_interval: auto
layout:
title:
text: Prices today (p/kWh)
xanchor: left
yanchor: bottom
x: 0.03
"y": 0.95
showlegend: false
xaxis:
nticks: 8
tickformat: "%-H:%M"
showgrid: false