ghost blank text at the top of treemap charts when an element has a value of zero

[lovasoa]

Description

Hey ! I noticed an issue while integrating ApexCharts TreeMap into sqlpage.

Steps to Reproduce

Open https://jsfiddle.net/wjmsqLar/

{
  "chart": {
    "type": "treemap",
    "fontFamily": "inherit",
    "parentHeightOffset": 0,
    "height": "250px",
    "stacked": false,
    "toolbar": {
      "show": false
    },
    "animations": {
      "enabled": false
    },
    "zoom": {
      "enabled": false
    }
  },
  "theme": {
    "palette": "palette4"
  },
  "dataLabels": {
    "enabled": true
  },
  "fill": {
    "type": "solid"
  },
  "stroke": {
    "width": 1,
    "lineCap": "round",
    "curve": "smooth"
  },
  "xaxis": {
    "tooltip": {
      "enabled": false
    },
    "tickAmount": 1,
    "title": {},
    "type": "category",
    "labels": {
      "datetimeUTC": false
    },
    "convertedCatToNumeric": true
  },
  "yaxis": [
    {
      "show": false,
      "showAlways": false,
      "showForNullSeries": true,
      "opposite": false,
      "reversed": false,
      "logarithmic": false,
      "logBase": 10,
      "tickAmount": null,
      "stepSize": null,
      "forceNiceScale": false,
      "floating": false,
      "labels": {
        "show": true,
        "minWidth": 0,
        "maxWidth": 160,
        "offsetX": 0,
        "offsetY": 0,
        "rotate": 0,
        "padding": 20,
        "style": {
          "colors": [],
          "fontSize": "11px",
          "fontWeight": 400,
          "cssClass": ""
        }
      },
      "axisBorder": {
        "show": false,
        "color": "#e0e0e0",
        "width": 1,
        "offsetX": 0,
        "offsetY": 0
      },
      "axisTicks": {
        "show": false,
        "color": "#e0e0e0",
        "width": 6,
        "offsetX": 0,
        "offsetY": 0
      },
      "title": {
        "rotate": -90,
        "offsetY": 0,
        "offsetX": 0,
        "style": {
          "fontSize": "11px",
          "fontWeight": 900,
          "cssClass": ""
        }
      },
      "tooltip": {
        "enabled": false,
        "offsetX": 0
      },
      "crosshairs": {
        "show": true,
        "position": "front",
        "stroke": {
          "color": "#b6b6b6",
          "width": 1,
          "dashArray": 0
        }
      }
    }
  ],
  "zaxis": {
    "title": {}
  },
  "markers": {
    "size": 0,
    "strokeWidth": 0,
    "hover": {
      "sizeOffset": 5
    }
  },
  "tooltip": {
    "fillSeriesColor": false
  },
  "plotOptions": {
    "bar": {
      "horizontal": false
    },
    "bubble": {
      "minBubbleRadius": 5
    }
  },
  "colors": [
    "#4299e1",
    "#d63939",
    "#74b816",
    "#ae3ec9",
    "#f59f00",
    "#0054a6",
    "#667382",
    "#f76707",
    "#000000",
    "#d6336c",
    "#0ca678",
    "#4263eb",
    "#17a2b8",
    "#2fb344"
  ],
  "series": [
    {
      "name": "North America",
      "data": [
        {
          "x": "United States",
          "y": 35
        },
        {
          "x": "Canada",
          "y": 15
        },
        {
          "x": "France",
          "y": 0
        },
        {
          "x": "Germany",
          "y": 0
        },
        {
          "x": "China",
          "y": 0
        },
        {
          "x": "Japan",
          "y": 0
        }
      ],
      "group": "apexcharts-axis-0"
    },
    {
      "name": "Europe",
      "data": [
        {
          "x": "United States",
          "y": 0
        },
        {
          "x": "Canada",
          "y": 0
        },
        {
          "x": "France",
          "y": 30
        },
        {
          "x": "Germany",
          "y": 55
        },
        {
          "x": "China",
          "y": 0
        },
        {
          "x": "Japan",
          "y": 0
        }
      ],
      "group": "apexcharts-axis-0"
    },
    {
      "name": "Asia",
      "data": [
        {
          "x": "United States",
          "y": 0
        },
        {
          "x": "Canada",
          "y": 0
        },
        {
          "x": "France",
          "y": 0
        },
        {
          "x": "Germany",
          "y": 0
        },
        {
          "x": "China",
          "y": 20
        },
        {
          "x": "Japan",
          "y": 10
        }
      ],
      "group": "apexcharts-axis-0"
    }
  ],
  "annotations": {
    "yaxis": [],
    "xaxis": [],
    "points": []
  }
}

Expected Behavior

The treemap does not have speckles

Actual Behavior

There is white text on a white background that slightly overrides that chart.

Screenshots

Reproduction Link

https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/JjQOroG

[lovasoa]

Thanks for the quick fix!