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.

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