Y-max to high when using stacked and mixing bar and line plots

[wormiedk]

Checklist

• [x] I updated the card to the latest version available
• [x] I cleared the cache of my browser
• [x] I verified that I'm really running the lastest version in my browser console
• [x] I checked if there is another issue opened with the same problem

Describe the bug I am attempting to generate a plot which show total docker memory in use and then some selected docker instances that show as percentage of the container in use e.g. Docker uses 1000 mb in total Of that total

• homeassistant uses 200 mb
• mariadb uses 100 mb

I would then like to have a bar or line at 1000 mb with bars stacked to 300 mb I have almost gotten it to work by showing docker total as a line and the rest of the entities as bars. The problem is that the extrema of the graph then becomes the sum of all three in the example the max y-axis value would be 1300 instead of 1000 mb. See also screenshot. I can come around this by manually specifiying the y-max but this value is dynamic

Version of the card Version: 1.7.0

To Reproduce This is the configuration I used:

type: 'custom:apexcharts-card'
stacked: true
header:
  show: true
all_series_config:
  fill_raw: last
  type: column
  group_by:
    func: avg
    duration: 0.5h
series:
  - entity: sensor.docker_memory
    name: Docker
    type: line
    stroke_width: 2
  - entity: sensor.docker_homeassistant_memory
    name: HASS
  - entity: sensor.docker_mc_nanna_memory
    name: Nanna
  - entity: sensor.docker_mc_frida_memory
    name: Frida
  - entity: sensor.docker_mc_andreas_memory
    name: Andreas
    show:
      datalabels: true
      legend_value: false
      in_header: false

Screenshots

Expected behavior y-max is set from the max value of both bars and lines

Desktop (please complete the following information):

• Browser Firefox
• Version 85.0.2 (64 bit)

[RomRider]

Not something I can fix unfortunately, this is the behavior of the library I use.

[wormiedk]

Okay thanks! Is there a way to subtract the shown values from the total using the transform function? E.g. docker = docker - homeassistant - mariadb?

[RomRider]

Unfortunately not, you don't have access to that information. Series are independent from each other. There is another feature request to have "grouping" for stacks, but this would require ApexCharts to support it, see #25

[trankillity]

Damn, I just started using this card and was hoping we would be able to set y-min and y-max for each series (or chart type at least).

It looks great using a single Y-axis

But looks terrible if I add in another measure

[trankillity]

Just a quick update, it looks like @RomRider is implementing the API/JS directly, so you can access all the variables within the ApexCharts library easily. Due to this, I was able to somewhat solve my problem.

To solve your problem specifically, you will want to manually specify a maximum Y-Axis value. This can be achieved with a static value, or you may be able to use templating or dummy sensors to specify this too.

In your instance, for a static visualisation you'd want something similar to this:

    apex_config:
      yaxis:
        max: 3000

If you can specify an entity or template as the max value, then you wouldn't even need the line, because you could just make the max of the entire graph that value.

For my purpose, it doesn't work quite as well because even though there are separate graph types being displayed, it's not a true combo graph - in that there are no separate Y-axes. Because my primary measure is in kWh and my secondary measure is in %, it doesn't work particularly well.

To get around if, I've just used the transform function to drop the %age measure by a static 30% that I will just need to remember to add myself.

Here's the result:

And here's how I achieved it:

  - type: 'custom:apexcharts-card'
    header:
      show: true
      title: Usage History
    graph_span: 7d
    apex_config:
      yaxis:
        min: -20
        max: 40
        tickAmount: 6
      chart:
        height: 300px
    span:
      end: day
    stacked: true
    all_series_config:
      type: column
      show:
        legend_value: false
      group_by:
        duration: 24h
        func: last
    series:
      - entity: sensor.grid_consumed_energy_day
        name: Grid
        color: '#FFC000'
      - entity: sensor.solar_self_consumed
        name: Consumed
        color: '#6A6B7F'
      - entity: sensor.grid_sold_energy_day
        name: Sold
        invert: true
        color: '#70AD47'
      - entity: sensor.fronius_relative_self_consumption
        name: Self Consumption
        type: line
        transform: return x - 30
        color: '#11a5d1'
        opacity: 0.8
        stroke_width: 3
        extend_to_end: false
        group_by:
          duration: 24h
          func: avg