Vue ChartKick环形图如何自定义cutoutPercentage？求解决方案

Hey there! Let's break down how to get that cutoutPercentage working with Vue ChartKick—your approach with Chart.defaults is on the right track, but the timing and Vue ChartKick's wrapper behavior need a little adjustment. Here are three reliable solutions:

1. Set Options Directly on the Chart Component (Per-Chart Customization) #

The simplest way for individual charts is to pass your custom config via the :library prop. Vue ChartKick explicitly accepts Chart.js options through this prop, so it’ll apply them directly to the chart instance:

<template>
  <doughnut-chart 
    :data="yourChartData"
    :library="{ cutoutPercentage: 10 }"
  ></doughnut-chart>
</template>

This works immediately because you’re feeding the config directly into the component that renders the chart.

2. Configure Global Defaults for All Charts #

If you want every doughnut chart to use this cutoutPercentage, set global defaults through Vue ChartKick’s own configuration system. Do this in your app’s entry file (like main.js) after importing dependencies:

import Vue from 'vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'

// Initialize Vue ChartKick first
Vue.use(Chartkick.use(Chart))

// Set global defaults for doughnut charts
Chartkick.options = {
  doughnut: {
    library: {
      cutoutPercentage: 10
    }
  }
}

This ensures all <doughnut-chart> components inherit this config automatically.

3. Fix the Timing for Chart.defaults #

If you still want to use Chart.defaults.doughnut.cutoutPercentage, the key is to modify the default before Vue ChartKick initializes. Chart.js defaults only apply to chart instances created after the change, so adjust your import order:

// First modify Chart.js defaults
import Chart from 'chart.js'
Chart.defaults.doughnut.cutoutPercentage = 10

// Then initialize Vue ChartKick
import Vue from 'vue'
import Chartkick from 'vue-chartkick'

Vue.use(Chartkick.use(Chart))

This way, when Vue ChartKick creates chart instances later, they’ll pick up your updated default.

Why Your Original Approach Didn’t Work #

Most likely, you were modifying Chart.defaults after Vue ChartKick had already created chart instances. Since defaults are only applied when a chart is initialized, existing instances won’t pick up the change retroactively. Using Vue ChartKick’s built-in props or global config avoids this timing issue entirely.

内容的提问来源于stack exchange，提问作者ryangus