Apexchart bug when displaying multiple negative sensors

I am using apexcharts (i love it!) to display energy entities: gas, electricity consumption (positive) and (negative) production (both two tariffs) as stacked bars. The gas and electricity consumption entities are shown above the x axis, the two production entities below using the invert option:

As you can see, the positive entities look ok, but the negative ones are not stacked correctly. If I deselect one of the production entities or all positive entitiies then they are dranw correctly (partial views):

and

This is the apex code:

type: custom:apexcharts-card
graph_span: 12month
stacked: true
header:
  show: true
  title: Daily Costs Energy Details Without Fixed Costs/Returns 12 Months
  show_states: false
  colorize_states: true
series:
  - entity: sensor.daily_costs_gas
    unit: €
    name: Gas
    type: column
    stroke_width: 1
    float_precision: 2
    data_generator: >
      // REMOVE ME

      return entity.attributes.daily_costs_concat.split(",").map((state, index)
      => {return[new
      Date(state.split(":")[0]),parseFloat(state.split(":")[1])]});
    show:
      extremas: true
      legend_value: false
  - entity: sensor.daily_costs_electricity_tariff_1
    unit: €
    name: Electricity Tariff 1 Consumption
    type: column
    stroke_width: 1
    float_precision: 2
    data_generator: >
      // REMOVE ME

      return entity.attributes.daily_costs_concat.split(",").map((state, index)
      => {return[new
      Date(state.split(":")[0]),parseFloat(state.split(":")[1])]});
    show:
      extremas: true
      legend_value: false
  - entity: sensor.daily_costs_electricity_tariff_2
    unit: €
    name: Electricity Tariff 2 Consumption
    type: column
    stroke_width: 1
    float_precision: 2
    data_generator: >
      // REMOVE ME

      return entity.attributes.daily_costs_concat.split(",").map((state, index)
      => {return[new
      Date(state.split(":")[0]),parseFloat(state.split(":")[1])]});
    show:
      extremas: true
      legend_value: false
  - entity: sensor.daily_returns_electricity_tariff_1
    unit: €
    name: Electricity Tariff 1 Production
    type: column
    stroke_width: 1
    float_precision: 2
    invert: true
    data_generator: >
      // REMOVE ME

      return entity.attributes.daily_costs_concat.split(",").map((state, index)
      => {return[new
      Date(state.split(":")[0]),parseFloat(state.split(":")[1])]});
    show:
      extremas: true
      legend_value: false
  - entity: sensor.daily_returns_electricity_tariff_2
    unit: €
    name: Electricity Tariff 2 Production
    type: column
    stroke_width: 1
    float_precision: 2
    invert: true
    data_generator: >
      // REMOVE ME

      return entity.attributes.daily_costs_concat.split(",").map((state, index)
      => {return[new
      Date(state.split(":")[0]),parseFloat(state.split(":")[1])]});
    show:
      extremas: true
      legend_value: false

I’m seeing same issue since updating apexcharts-card yesterday to v2.2.3.


I only have one negative (invert=true) series. Previously - the bars would be drawn all the way from y=0 to y=value. Now there is a gap, which looks ugly.
I have noticed that the bar lengths all looks the same ~200, which coincidentally matches the β€œmin” value for the y axis. Perhaps the code is trying to clip the bars to β€œmin” - but wrongly clipping the wrong end of the bar.
So I have a work around. Change y-axis β€œmin” value to be large enough:

But would prefer the earlier behavior where bars could correctly draw past the y axis min value.

1 Like