Apex Chart column alignment against X-axis

Hi!

Is it possible to align columns against X axis so the left column side is the value? Now the column is centered. Here I have a graph over energy prices.

image

So in above example the first column should be between 09:00 and 10:00. I don’t like the area graph, as it has it’s issues and is not so easily read as columns.

Configuration

type: custom:config-template-card
variables:
  now: new Date().getTime()
  tapWater: new Date(states['sensor.time_until_tap_water_heating'].state).getTime()
entities:
  - sensor.sunrise
  - sensor.sunset
  - sensor.electricity_price_50_percentile
card:
  type: custom:apexcharts-card
  graph_span: 48h
  span:
    start: day
  header:
    title: Electricity Buy Price
    show: true
  stacked: true
  all_series_config:
    show:
      legend_value: false
      datalabels: false
      extremas: true
      in_brush: true
    float_precision: 2
    type: column
  now:
    show: false
    label: Now
    color: red
  series:
    - entity: sensor.nordpool_buy
      name: Today
      extend_to: false
      opacity: 0.7
      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_buy
      name: Tomorrow
      opacity: 0.7
      data_generator: |
        return entity.attributes.raw_tomorrow.map((start, index) => {
          return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
        });
    - entity: sensor.electricity_buy_prices_with_margin_transfer_vat_and_taxes
      name: All the stuff
      extend_to: false
      opacity: 0.3
      data_generator: |
        return entity.attributes.rawData.map((start, index) => {
          return [new Date(start["start"]).getTime(), entity.attributes.rawData[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
      forceNiceScale: true
      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:
      bar:
        columnWidth: 95%
      candlestick:
        colors:
          upward: '#00B746'
          downward: '#EF403C'
        wick:
          useFillColor: true
    markers:
      size: 0.5
    grid:
      show: true
      strokeDashArray: 1
      position: front
      xaxis:
        lines:
          show: true
    annotations:
      position: front
      xaxis:
        - x: ${now}
          label:
            text: Now
            style:
              background: red
        - x: ${tapWater}
          label:
            text: Tap Water Heating
            borderWidth: 0
            style:
              background: red
        - x: ${new Date(states['sensor.sunrise'].state).getTime()}
          label:
            text: Sunrise ☉
            borderWidth: 0
            style:
              background: '#0000'
        - x: ${new Date(states['sensor.solar_noon'].state).getTime()}
          label:
            text: Noon ☼
            borderWidth: 0
            style:
              background: '#0000'
        - x: ${new Date(states['sensor.sunset'].state).getTime()}
          label:
            text: Sunset ☾
            borderWidth: 0
            style:
              background: '#0000'
        - x: ${new Date(states['sensor.sunrise'].attributes.tomorrow).getTime()}
          label:
            text: Sunrise ☉
            borderWidth: 0
            style:
              background: '#0000'
        - x: >-
            ${new
            Date(states['sensor.solar_noon'].attributes.tomorrow).getTime()}
          label:
            text: Noon ☼
            borderWidth: 0
            style:
              background: '#0000'
        - x: ${new Date(states['sensor.sunset'].attributes.tomorrow).getTime()}
          label:
            text: Sunset ☾
            borderWidth: 0
            style:
              background: '#0000'
      yaxis:
        - 'y': ${states['sensor.electricity_price_50_percentile'].state}
          strokeDashArray: 2
          borderColor: '#FFFF00'
          borderWidth: 0.5
          label:
            borderColor: '#ADFF2F'
            borderWidth: 0
            borderRadius: 0
            text: 50% percentile
            textAnchor: center
            position: left
            offsetX: 0
            offsetY: 2
            style:
              background: transparent
              color: '#FFFF00'
              fontSize: 10px
              fontWeight: 10
              fontFamily: Segoe UI
              cssClass: apexcharts-xaxis-annotation-label

Answering my own question.

One solution is to use time_delta in series sections and add 30 minutes. The drawback is that timestamps in data labels will have +30 minutes.