Apexchart area missing one hour between day series

Configuration Frontend
1

Hi,

I’ve had this “problem” for about a year now. I thought to ask for help. The apex chart shows today (24h) and tomorrow (24h) series of electricity prices. The setup is copied from here. I don’t get why the area doesn’t get filled for the hour 23:00-24:00. Any ideas?

See how there is gap where the measurement from time 23 doesn’t fill the following our like the other hours do?

image

There is the black gap between today’s and tomorrow’s series. I have tried all I can come up with to fiddle with series settings, but no help.For every other hour it fills the rest of the hour with the proper level, but not 23:00-24:00. Why?

Here is the config:

type: custom:apexcharts-card
graph_span: 48h
span:
  start: day
  offset: +0H
header:
  title: Sähkön tuntihinta
  show: true
  show_states: false
  colorize_states: true
hours_12: false
stacked: false
experimental:
  color_threshold: true
all_series_config:
  show:
    legend_value: false
    datalabels: false
    extremas: true
    in_brush: true
  float_precision: 3
  type: area
  invert: false
  fill_raw: zero
  color_threshold:
    - value: -1
      color: 1E90FF
    - value: 6
      color: '008000'
    - value: 12
      color: DAA520
    - value: 25
      color: FF0000
  opacity: 0.7
now:
  show: true
  label: Now
  color: red
series:
  - entity: sensor.nordpool_kwh_fi_eur_1_100_024
    name: Current day
    extend_to: false
    data_generator: |
      return entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
      });
  - entity: sensor.nordpool_kwh_fi_eur_1_100_024
    name: Tomorrow
    data_generator: |
      return entity.attributes.raw_tomorrow.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
      });
apex_config:
  chart:
    height: 400px
    animations:
      enabled: true
      easing: easeinout
      speed: 800
      animateGradually:
        enabled: true
        delay: 150
  zoom:
    enabled: true
    type: x
    autoScaleYaxis: true
    zoomedArea:
      fill:
        color: '#90CAF9'
        opacity: 0.4
      stroke:
        color: '#0D47A1'
        opacity: 0.4
        width: 1
  legend:
    show: false
    floating: true
    offsetY: 25
  yaxis:
    opposite: false
    reversed: false
    logarithmic: false
    decimalsInFloat: 2
    labels:
      show: true
    tooltip:
      enabled: true
    crosshairs:
      show: true
  xaxis:
    labels:
      show: true
      rotate: -45
      rotateAlways: true
    logarithmic: true
  stroke:
    show: true
    curve: stepline
    lineCap: butt
    colors: undefined
  plotOptions:
    candlestick:
      colors:
        upward: '#00B746'
        downward: '#EF403C'
      wick:
        useFillColor: true
  markers:
    size: 1
  grid:
    show: true
    strokeDashArray: 1
    position: front
    xaxis:
      lines:
        show: true

All values are ok, it’s just the damned black gap of area in middle that makes me crazy…

2

Suggest to ask apexcharts-related questions in the dedicated thread.

3

Thanks, I was considering it. But such mega thread is against any forum logic. 3k+ messages in one thread makes it impossible to find any solutions from the endless wall of text. Forum questions should have clear topic and answers to given question. Next questions in different topic.

1 Like
4

Instead you suggest to create 3k posts about same.
Not a better way.

5

Having exactly same problem, probably many other people too.

I have noticed, that this behavior has something to do with daylight saving, it seems to be there during winter, but not summer. Of course, winter time is by definition official time, at least here in Finland.

When reading raw hourly values from Nordpool (I have both Entso-E and Nordpool HACS), they are correct, it’s easy to add numeric entity to dashboard and check the value. Compared to Apex charts, chart is shifted one hour. Obviously, “the shift” has something to do with handling of timestamps and/or DST mechanism, that Apex charts doesn’t understand with commonly used config examples.

And yes, I have to agree with @ikke-t, 3k answers / questions-threads are PITA to read and search. And after that, parse all the differences between changes between versions etc.

1 Like
6

NO, this was exactly NOT his suggestion.

7

So I had the same problem and found this post when googling. Figured I should share the solution i am using.

So the solution (or perhaps workaround) is to concatenate the two series to one with this function. I found it somewhere on the internet (i cant find it with google anymore)

 data_generator: |
      return entity.attributes.raw_today
        .concat(entity.attributes.raw_tomorrow).map((p) => {
        return [new Date(p.start), p.value];
      });

and as I am writing this I realise that I do not know what happens after midnight :smile:

1 Like
8

I’m having the exact same problem. Did you ever come up with a solution?
image
Here’s my code:

type: custom:config-template-card
variables:
  getPriceState: |
    temp => {
      if (temp >= ((states[this._config.entities[0]].attributes.max - states[this._config.entities[0]].attributes.average) * 0.4 + states[this._config.entities[0]].attributes.average)) {
          return "red";
      } else if (temp >= ((states[this._config.entities[0]].attributes.average - states[this._config.entities[0]].attributes.min) * 0.4 + states[this._config.entities[0]].attributes.min)) {
          return "orange"
      }
      return "green";
    }
entities:
  - sensor.nordpool
card:
  type: custom:apexcharts-card
  now:
    show: true
    label: Nu
    color: >-
      ${getPriceState(states[this._config.entities[0]].attributes.current_price)}
  experimental:
    color_threshold: true
  graph_span: "${states[this._config.entities[0]].attributes.tomorrow_valid ? '2d' : '1d'}"
  apex_config:
    dataLabels:
      enabled: true
      dropShadow:
        enabled: true
    plotOptions:
      bar:
        rangeBarOverlap: true
        borderRadius: 0
        columnWidth: 70%
    chart:
      height: 300px
    legend:
      showForSingleSeries: false
    yaxis:
      min: 0
      decimalsInFloat: 0
      tickAmount: 3
      forceNiceScale: true
    xaxis:
      labels:
        format: HH
    markers:
      size: 0
      style: hollow
  all_series_config:
    show:
      offset_in_name: true
  header:
    show: true
    show_states: true
    colorize_states: true
  span:
    start: day
  series:
    - entity: ${this._config.entities[0]}
      type: line
      name: Idag
      unit: öre/kWh
      float_precision: 1
      extend_to: false
      stroke_width: 3
      show:
        in_header: false
        legend_value: false
        extremas: false
      data_generator: |
        return entity.attributes.today.map((price, index) => {
          return [new Date(Date.now()).setHours(index,0,0), price];
        });
      color_threshold:
        - value: 0
          color: green
        - value: >-
            ${(states[this._config.entities[0]].attributes.average -
            states[this._config.entities[0]].attributes.min) * 0.4 +
            states[this._config.entities[0]].attributes.min}
          color: orange
        - value: >-
            ${(states[this._config.entities[0]].attributes.max -
            states[this._config.entities[0]].attributes.average) * 0.4 +
            states[this._config.entities[0]].attributes.average}
          color: red
    - entity: ${this._config.entities[0]}
      type: line
      name: Imorgon
      unit: öre/kWh
      float_precision: 1
      extend_to: false
      stroke_width: 3
      show:
        in_chart: >-
          ${states[this._config.entities[0]].attributes.tomorrow_valid ? true :
          false}
        in_header: false
        legend_value: false
        extremas: false
      data_generator: |
        return entity.attributes.tomorrow.map((price, index) => {
          return [new Date(Date.now() + ( 3600 * 1000 * 24)).setHours(index,0,0), price];
        });
      color_threshold:
        - value: 0
          color: green
        - value: >-
            ${(states[this._config.entities[0]].attributes.average -
            states[this._config.entities[0]].attributes.min) * 0.4 +
            states[this._config.entities[0]].attributes.min}
          color: orange
        - value: >-
            ${(states[this._config.entities[0]].attributes.max -
            states[this._config.entities[0]].attributes.average) * 0.4 +
            states[this._config.entities[0]].attributes.average}
          color: red
    - entity: ${this._config.entities[0]}
      attribute: min
      type: line
      color: green
      float_precision: 1
      name: Dagens lägsta
      unit: " öre"
      group_by:
        duration: 1d
      show:
        in_chart: false
        legend_value: false
    - entity: ${this._config.entities[0]}
      attribute: average
      type: line
      color: orange
      float_precision: 1
      name: Snittpris idag
      unit: " öre"
      group_by:
        duration: 1d
      show:
        in_chart: false
        legend_value: false
        in_header: false
    - entity: ${this._config.entities[0]}
      name: Just nu
      unit: " öre"
      color: >-
        ${getPriceState(states[this._config.entities[0]].attributes.current_price)}
      type: line
      show:
        in_chart: false
      float_precision: 1
    - entity: ${this._config.entities[0]}
      attribute: max
      type: line
      color: red
      float_precision: 1
      name: Dagens högsta
      unit: " öre"
      group_by:
        duration: 1d
      show:
        in_chart: false
        legend_value: false
9

My solution works. Se above.

10

Got it, thanks! Works after some help with ChatGPT :laughing: