Treemap dataLabels background not working

[drclahiru]

I tried to add a box border around the dataLabels. According to the documentation I have tried the below code segment. But it does not work.

dataLabels: {
   background: {
      enabled: true
}

Below is a simplified version of the code I'm using.

<script setup lang="ts">
import VueApexCharts from "vue3-apexcharts"

const title = "Raised"

const options = {
  legend: {
    show: false,
  },
  chart: {
    type: "treemap",
    toolbar: "hide",
  },
  colors: ["#D21F34", "#F08227", "#00A1D4"],
  plotOptions: {
    treemap: {
      distributed: true,
      enableShades: false,
      useFillColorAsStroke: true,
      dataLabels: {
        format: "truncate",
      },
    },
  },
  tooltip: {
    enabled: false,
  },
  dataLabels: {
    enabled: true,
    textAnchor: "middle",
    offsetY: -2,
    style: {
      fontSize: "12px",
      fontWeight: "400",
    },
    background: {
      enabled: true, //TODO: This should draw a rectangle around the number
      foreColor: "#ffffff",
      padding: 2,
      borderWidth: 1,
      borderColor: "#ffffff",
      opacity: 1,
    },
  },
  states: {
    hover: {
      filter: {
        type: "none",
      },
    },
  },
}

const series = [
  {
    data: [
      {
        x: "",
        y: 5,
      },
      {
        x: "47",
        y: 47,
      },
      {
        x: "147",
        y: 147,
      },
    ],
  },
]

const width = 138
const height = 148
</script>

<template>
  <div class="sfx-chart--treemap">
    <VueApexCharts
      type="treemap"
      :width="width"
      :height="height"
      :options="options"
      :series="series"
    />
    <div class="text-center">{{ title }}</div>
  </div>
</template>

<style>
.sfx-chart--treemap {
  width: 128px;
}
</style>

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.