DoughnutChart

import DoughnutChart from "@wikicasa-dev/components/chart/DoughnutChart";

A Chart.js doughnut chart (via vue-chartjs) for parts of a whole: capital vs. interest of a mortgage, sale vs. rent listings in a city. Pass Chart.js data and options; it renders a <canvas> on the client (Chart.js loads lazily, nothing appears in server HTML). A common pattern is a label absolutely positioned in the hole (see Usage).

Tooltip, legend and title are registered only if options.plugins.tooltip, .legend or .title is set (an empty object {} is enough).

#Usage

<script setup lang="ts">
import DoughnutChart from "@wikicasa-dev/components/chart/DoughnutChart";
import type { ChartData, ChartOptions } from "@wikicasa-dev/components";

const data: ChartData<"doughnut"> = {
  labels: ["Capitale", "Interessi"],
  datasets: [{ data: [200000, 64300], backgroundColor: ["#2B5DFF", "#B4C2F0"], borderWidth: 0 }],
};

const options: ChartOptions<"doughnut"> = {
  cutout: 50,
  responsive: true,
  maintainAspectRatio: true,
  plugins: { legend: { display: false }, tooltip: { enabled: false } },
};
</script>

<template>
  <div class="installment">
    <DoughnutChart :data="data" :options="options" />
    <p class="installment__label"><strong>€ 1.102</strong><br />al mese</p>
  </div>
</template>

<style scoped>
.installment { position: relative; width: 136px; height: 136px; margin: 0 auto; }
.installment__label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; text-align: center; }
</style>

#Do / Don't

• Do give it a sized, position: relative container; with the default aspect ratio the chart is a square as wide as its container.
• Do set plugins.legend: { display: false } explicitly when you don't want a legend: plugins are registered globally, so once any chart on the page has loaded the legend, every chart shows one by default.
• Do decide plugins up front: which modules to load is decided once, when the chart is created.
• Use cutout (px or %) for the hole size, backgroundColor per slice from the design tokens' colors.
• Use static mock data in mockups; ChartData / ChartOptions types are re-exported from @wikicasa-dev/components.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
options	_DeepPartialObject<CoreChartOptions<"doughnut"> & ElementChartOptions<"doughnut"> & PluginChartOptions<"doughnut"> & DatasetChartOptions<"doughnut"> & ScaleChartOptions<"doughnut"> & DoughnutControllerChartOptions>		yes
data	ChartData<"doughnut", number[], unknown>		yes

Events

None.

v-model

None.

Slots

None.

Exposed (template ref)

None.