In my chart, I would like to remove some of the legend items based on a condition and I am using CSS, display none, from JS controller. Removing works fine, however, a blank space is left at the element's occupied space. Why?

As this HTML is generated dynamically, I am presenting a screenshot from the front-end, in which display: none is highlighted. I attempted to edit tags, play with CSS, in the browser, but nothing helped. The blank space remains still.

And here is the JS controller section that hides the item, but I think the issue is in HTML/CSS. Any help is appreciated.

chart: {
    //.....................................

    callback: function (chart) {


         var legendItems = document.getElementsByClassName('nv-series');

         for (var x = 0; x < legendItems.length; x  ) {
                                                
             var legendItem = legendItems[x];
             var content = legendItem.textContent.trim();

             if (content.indexOf('Item 3') !== -1 || content.indexOf('Item 7') !== -1) {
                                 
                 legendItem.style.display = 'none';

              }
          }

     }
}

CodePudding user response：

The blank space is because the other elements are being transformed to be offset by a certain amount, and that amount stays the same even if one element is hidden.

So when you hide one element, either loop through all of the elements that follow it and manually subtract the width of the hidden element from the translate-x amount, or make another way of listing the elements side by side without using the transform property.