Set minimum height or width for column Apexcharts chart

Question

If data is very lower than others, it's almost like zero, and the user can't click because it's too small.

How can I set a minimum height or width for small numbers?

Gif

Answer 1

Use this function when chart render end

function svgBalancer(minHeight, absUnit, bool) {
  let cols = document.getElementsByClassName("apexcharts-bar-area");
  let labels = document.getElementsByClassName("apexcharts-datalabel");
  for (let i = 0; i < cols.length; i++) {
    if (parseFloat(cols[i].getAttribute("barHeight")) <= minHeight && parseFloat(cols[i].getAttribute("barHeight")) != 0) {
      let d = cols[i].getAttribute("d");
      d = d.split(" ");
      if (bool == false) {
        let d2 = d[2].split(".");
        d2[0] = absUnit;
        d[2] = d2.join(".");
        let d3 = d[3].split(".");
        d3[0] = absUnit;
        d[3] = d3.join(".");
      } else {
        let d4 = d[4].split(".");
        d4[0] = absUnit;
        d[4] = d4.join(".");
        let d6 = d[6].split(".");
        d6[0] = absUnit;
        d[6] = d6.join(".");
      }
      cols[i].setAttribute("d", d.join(" "));
      let yLabel = parseFloat(labels[i].getAttribute("y"));
      let delta = yLabel - absUnit;
      yLabel = yLabel - delta - 8;
      labels[i].setAttribute("y", yLabel);
    }
  }
}

updated: function(chartContext, config) {
    svgBalancer(8, 313, true);
},
animationEnd: function(chartContext, options) {
    svgBalancer(8, 313, false);
}

The code does not work well but it is better than nothing.