ApexCharts card - column and stepline merged

[sonite]

Has anyone successfully added both a column and a stepline graph on top of each other? Both should align correctly on the x-axis, but in my case, they appear offset.

What I want:

What I get:

My code:

type: custom:config-template-card
variables:
  - "\"sensor.nordpool_energy_prices\""
  - Number(states['sensor.nordpool_energy_prices'].state)
  - >-
    String('Pris just nu ' +
    Number(states['sensor.nordpool_energy_prices'].state) + ' öre/kWh')
  - Number(states['sensor.nordpool_energy_prices'].attributes.average)
  - >-
    (((states['sensor.nordpool_energy_prices'].attributes.max -
    states['sensor.nordpool_energy_prices'].attributes.min) / 4) * 0) +
    Number(states['sensor.nordpool_energy_prices'].attributes.min)
  - >-
    (((states['sensor.nordpool_energy_prices'].attributes.max -
    states['sensor.nordpool_energy_prices'].attributes.min) / 4) * 1) +
    Number(states['sensor.nordpool_energy_prices'].attributes.min)
  - >-
    (((states['sensor.nordpool_energy_prices'].attributes.max -
    states['sensor.nordpool_energy_prices'].attributes.min) / 4) * 2) +
    Number(states['sensor.nordpool_energy_prices'].attributes.min)
  - >-
    (((states['sensor.nordpool_energy_prices'].attributes.max -
    states['sensor.nordpool_energy_prices'].attributes.min) / 4) * 3) +
    Number(states['sensor.nordpool_energy_prices'].attributes.min)
  - String(states['sensor.nordpool_energy_prices'].state)
entities: ${vars[0]}
card:
  type: custom:apexcharts-card
  experimental:
    color_threshold: true
  graph_span: 24h
  hours_12: false
  header:
    title: ${vars[2]}
    show: true
  span:
    start: day
  now:
    show: true
    label: ${String(vars[8])}
  apex_config:
    xaxis:
      type: datetime
  series:
    - entity: ${vars[0]}
      type: column
      stroke_width: 1
      data_generator: |
        return entity.attributes.times.map((time, index) => {
          return [new Date(time).getTime(), entity.attributes.prices[index]];
          });
      color_threshold:
        - value: ${vars[4]}
          color: "#ffffff"
        - value: ${vars[5]}
          color: "#fad5ad"
        - value: ${vars[6]}
          color: "#fabe7e"
        - value: ${vars[7]}
          color: "#ff9c33"
    - entity: ${vars[0]}
      type: line
      curve: stepline
      stroke_width: 1
      data_generator: |
        return entity.attributes.times.map((time, index) => {
          return [new Date(time).getTime(), entity.attributes.prices[index]];
          });
  yaxis:
    - id: ore
      decimals: 2
      apex_config:
        tickAmount: 10

[sonite]

It’s not perfect since this creates other issues with my graph, but it’s a step in the right direction. I had to mathematically shift one of the graphs with (cheating):

Solution: Adjust Timestamps for Stepline

Modify the data_generator function for your stepline series by:

return [new Date(time).getTime() - (30 * 60 * 1000)

- (30 * 60 * 1000) → This shifts each stepline data point back 30 minutes

My full code:

entities: ${vars[0]}
card:
  type: custom:apexcharts-card
  experimental:
    color_threshold: true
  graph_span: 24h
  hours_12: false
  header:
    title: ${vars[2]}
    show: true
  span:
    start: day
  now:
    show: true
    label: ${String(vars[8])}
  apex_config:
    grid:
      show: false
    legend:
      show: false
  series:
    - entity: ${vars[0]}
      type: line
      curve: stepline
      stroke_width: 1
      data_generator: |
        return entity.attributes.times.map((time, index) => {
          return [new Date(time).getTime() - (30 * 60 * 1000), entity.attributes.prices[index]];
          });
      color: grey
    - entity: ${vars[0]}
      type: column
      stroke_width: 1
      data_generator: |
        return entity.attributes.times.map((time, index) => {
          return [new Date(time).getTime(), entity.attributes.prices[index]];
          });
      color_threshold:
        - value: ${vars[4]}
          color: "#ffffff"
        - value: ${vars[5]}
          color: "#fad5ad"
        - value: ${vars[6]}
          color: "#fabe7e"
        - value: ${vars[7]}
          color: "#ff9c33"

[vingerha]

It is expected behavior. The column mid-point is where the value is and the line goes there too. Other option is to apply an offset but this only works if your column-width is stable