Charts are overlapping legend after refreshing the data

// Example data
[{
    "count": 11,
    "percent": 0.9166666666666666,
    "profanity": "none"
  },
  {
    "count": 0,
    "percent": 0,
    "profanity": "mild"
  },
  {
    "count": 0,
    "percent": 0,
    "profanity": "medium"
  },
  {
    "count": 0,
    "percent": 0,
    "profanity": "strong"
  },
  {
    "count": 1,
    "percent": 0.08333333333333333,
    "profanity": "extreme"
  }
]


// Function to create empty chart. This only gets called on initial query, if the data is just filtered or refreshed, code will go right to updating the alreayd existing chart.
const createEmptyProfanityChart = () => {
  var options = {
    series: [],
    chart: {
      width: 380,
      height: 265,
      type: "pie",
      id: "profanity-chart",
    },
    labels: [],
    redrawOnParentResize: false,
    redrawOnWindowResize: false,
  };

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


// Function to update chart with new data
const updateProfanityChart = (data) => {
  let extremeCount;
  let strongCount;
  let mediumCount;
  let mildCount;
  let noneCount;

  // loop through profanity data and push counts into array
  data.profanity_list.forEach((item) => {
    switch (item.profanity) {
      case "none":
        noneCount = item.count;
        break;
      case "mild":
        mildCount = item.count;
        break;
      case "medium":
        mediumCount = item.count;
        break;
      case "strong":
        strongCount = item.count;
        break;
      case "extreme":
        extremeCount = item.count;
        break;
    }
  });

  let countsArr = [
    extremeCount,
    strongCount,
    mediumCount,
    mildCount,
    noneCount,
  ];

  let labelsArr = ["Extreme", "Strong", "Medium", "Mild", "None"];

  ApexCharts.exec("profanity-chart", "updateSeries", countsArr, true);

  ApexCharts.exec(
    "profanity-chart",
    "updateOptions", {
      labels: labelsArr,
    },
    false,
    true
  );
};


// Create empty chart if first time populating data
if (initialFetch === false) {
  createEmptyChart()
}

// Function to update the chart with  data
populateChart(data)

.stats-card-container {
  width: 400px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
  position: relative;
  border-radius: 0.8rem;
  overflow: clip;
}

.stats-cards-row {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 3rem;
  margin-top: 1rem;
  column-gap: 1rem;
}

.stats-card-header {
  height: 40px;
  background-color: var(--main-orange-th-color);
  padding: 8px;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.stats-chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

#no-data__stats {
  text-align: center;
  margin-top: 2rem;

<!-- Row 1 -->
<div id="stats-cards-row-1" class="stats-cards-row">
  <!-- Bent -->
  <div id="bent-card-container" class="stats-card-container">
    <div id="bent-card-header" class="stats-card-header">
      Philosophical Bent
    </div>
    <div id="bent-chart-container" class="stats-chart-container">
      <div id="bent-chart"></div>
    </div>
  </div>
  <!-- /Bent -->
  <!-- Profanity -->
  <div id="profanity-card-container" class="stats-card-container">
    <div id="profanity-card-header" class="stats-card-header">
      Profanity
    </div>
    <div id="profanity-chart-container" class="stats-chart-container">
      <div id="profanity-chart"></div>
    </div>
  </div>
  <!-- /Profanity -->
</div>
<!-- /Row 1-->