I've added tooltips.backgroundColor in chartOptions but still doesn't work, so anyone can help me?

Here is my code

<template>
  <Doughnut
    :chart-options="chartOptions"
    :chart-data="chartData"
    :chart-id="'doughnut-chart'"
    :styles="styles"
    :width="width"
    :height="height"
  />
</template>

<script lang="ts">
import { defineComponent, type PropType } from "vue";
import TypographyComponent from "@/core/ui/components/typography/Typography.component.vue";
import { Doughnut } from "vue-chartjs";
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement,
  CategoryScale,
  type Plugin,
} from "chart.js";

ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);

export default defineComponent({
  name: "ProgressChartComponent",
  components: { Doughnut, TypographyComponent },
  props: {
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 400,
    },
    styles: {
      type: Object as PropType<Partial<CSSStyleDeclaration>>,
      default: () => {},
    },
    chartData: {
      type: Object,
      required: false,
      default: () => {},
    },
  },
  setup() {
    const chartOptions = {
      responsive: true,
      maintainAspectRatio: false,
      cutout: "64%",
      tooltips: {
        enabled: false,
        backgroundColor: "#227799",
      },
    };
    return {
      chartOptions,
    };
  },
});

</script>

...

CodePudding user response：

Guessing that you're using Chart.js v3, be aware that the tooltips are defined in the namespace options.plugins.tooltip but not options.tooltips as in your code. Therefore chartOptions needs to be changed as follows:

const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  cutout: "64%",
  plugins: {
    tooltip: {
      backgroundColor: "#227799"
    }
  }
};

For further information, please consult Tooltip Configuration from the Chart.js documentation.