ApexCharts card - A highly customizable graph card

[markcocker]

@RomRider

Try something like:

let res = [];
for (const [key, value] of Object.entries(entity.attributes)) {
  res.push([new Date(key).getTime(), value]);
}
return res.sort((a, b) => { return a[0] - b[0] })

Thankyou very much - that worked first time. I have now included two entities, one to show the current price sensor history, the other to show the upcoming rates as can be seen in the screen shots.

One question about the card header. The “Next Rate” value shows 10.4 which is the value of the last known value in the future ie. 16 Feb 2021 at 22:30. Ideally I’d like it to show 29.6 which is the value 15 Feb 2021 at 17:00. Not sure if this is a bug or I need to work around it.

Card configuration

type: 'custom:apexcharts-card'
header:
  show: true
  show_states: true
  colorize_states: true
  title: Octopus Agile rates
span:
  start: day
graph_span: 48hours
all_series_config:
  stroke_width: 2
  type: area
  extend_to_end: false
  curve: stepline
experimental:
  color_threshold: true
now:
  show: true
  label: now
  color: orange
color_list:
  - orange
  - grey
y_axis_precision: 0
series:
  - entity: sensor.octopus_agile_current_rate
    name: Current rate
    group_by:
      func: max
      duration: 30min
  - entity: octopusagile.rates
    name: Next Rate
    unit: p/kWh
    data_generator: |
      let res = [];
      for (const [key, value] of Object.entries(entity.attributes)) {
        res.push([new Date(key).getTime(), value]);
      }
      return res.sort((a, b) => { return a[0] - b[0] });
apex_config:
  legend:
    show: false
  grid:
    borderColor: '#7B7B7B'
  chart:
    foreColor: '#7B7B7B'
    zoom:
      type: x
      enabled: true
      autoScaleYaxis: true
    toolbar:
      show: true
      autoSelected: zoom
      tools:
        zoom: true
        zoomin: false
        zoomout: false
        pan: false
        reset: true