Issue Report: hideZeroBarsWhenGrouped Not Working for Middle Zero Values in Vertical Bar Chart (horizontal: false)

[Ctere1]

Description

In ApexCharts v4.4.0, the hideZeroBarsWhenGrouped option does not work correctly when horizontal: false (i.e., vertical bar chart) if zero values appear in the middle of the dataset. However, when horizontal: true, it works as expected.

---

Steps to Reproduce

1. Create a bar chart with horizontal: false
2. Use hideZeroBarsWhenGrouped: true
3. Include multiple series where some bars have y: 0 in the middle of the dataset
4. Observe that zero-value bars in the middle are still displayed

Example:

let options = {
  chart: {
    type: 'bar',
    height: "300px"
  },
  dataLabels: {
    style: {
      colors: ['#F44336', '#E91E63', '#9C27B0']
    }
  },
  plotOptions: {
    bar: {
      horizontal: false, // If set to true, hideZeroBarsWhenGrouped works
      barHeight: "70%",
      hideZeroBarsWhenGrouped: true
    }
  },  
  series: [
    {
      name: "Series 1",
      data: [
        { x: "Category 1", y: 0 },
        { x: "Category 2", y: 0 },
        { x: "Category 3", y: 20 },
        { x: "Category 4", y: 20 }
      ]
    },
    { 
      name: "Series 2",
      data: [
        { x: "Category 1", y: 20 },
        { x: "Category 2", y: 20 },
        { x: "Category 3", y: 0 }, // <-- Middle zero value
        { x: "Category 4", y: 123 }
      ]
    },
    { 
      name: "Series 3",
      data: [
        { x: "Category 1", y: 0 },
        { x: "Category 2", y: 50 },
        { x: "Category 3", y: 10 },
        { x: "Category 4", y: 0 }
      ]
    }
  ],
  xaxis: {}
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

Expected Behavior

• When hideZeroBarsWhenGrouped: true, all zero-value bars should be hidden, regardless of their position in the datase

Actual Behavior

• Horizontal (horizontal: true) → Zero-value bars are correctly hidden (Works as expected) ✅
• Vertical (horizontal: false) → Zero-value bars in the middle of the dataset are still visible (Bug: hideZeroBarsWhenGrouped is ignored for middle values) ❌
• Zero-value bars at the beginning or end of the dataset may be hidden, but any zero values appearing between non-zero values remain visible unexpectedly.

Screenshots

Vertical (hideZeroBarsWhenGrouped: true )	Horizontal (hideZeroBarsWhenGrouped: true )

Reproduction Link

You can test the issue using this CodePen example: https://codepen.io/Cemil-Tan/pen/gbOYqGG

[brianlagunas]

Your reproduction link does not replicate the issue following the your "Steps to Reproduce".

There are no zeros being shown

[Ctere1]

Hi @brianlagunas

Thank you for your quick response! Perhaps I wasn't able to explain the issue clearly enough. To clarify, in the attached screenshots, the empty spaces in the chart actually represent zero-value bars that are still being rendered, even though hideZeroBarsWhenGrouped: true is enabled.

This behavior specifically occurs in vertical bar charts (horizontal: false). While zero-value bars at the beginning or end of the dataset might be hidden, those appearing in the middle remain visible, creating unintended gaps. However, in horizontal bar charts (horizontal: true), zero-value bars are correctly hidden as expected.

Would you mind taking another look at the screenshots to see if this aligns with what I’m describing? I appreciate your time and help in understanding whether this is expected behavior or a potential issue.

Thanks again!

[brianlagunas]

Ahhh, thank you for clarifying.