値に応じて変化するサークルの作成方法

vue-chartjsを用いてPageSpeed Insights
のような点数に応じてボーダーが表示される形で実装したいと考えています。
現状、VueCliにてプロジェクトを作成し、開発を進めています。
以下は、TestChart.vueファイルになります。

<script>
import { Doughnut } from 'vue-chartjs'

export default {
  extends: Doughnut,
  data: () => ({
    chartdata: {
      datacollection: {
        label: '# of Votes',
        datasets:[
          {
            data: [20],
            backgroundColor: [
              '#ff4e42',
              // 'rgba(54, 162, 235, 0.2)',
              // 'rgba(255, 206, 86, 0.2)',
              // 'rgba(75, 192, 192, 0.2)',
              // 'rgba(153, 102, 255, 0.2)',
              // 'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              '#ff4e42',
              // 'rgba(54, 162, 235, 1)',
              // 'rgba(255, 206, 86, 1)',
              // 'rgba(75, 192, 192, 1)',
              // 'rgba(153, 102, 255, 1)',
              // 'rgba(255, 159, 64, 1)'
            ],
            borderWidth:1
          }
        ]
      }
    },
    options: {
      responsive: false,
      maintainAspectRatio: false,
      cutoutPercentage: 90,
      // circumference:3 * Math.PI,
      // rotation:-0.5 * Math.PI,
      tooltips: {
          mode: 'false'
      },
      // layout: {
      //   padding: {
      //     left: 90,
      //     right: 90,
      //     top: 90,
      //     bottom: 90
      //   }
      // }
      legend:{
        display:true,
        labels:{
          fontColor: 'rgb(255, 99, 132)',
          lineCap:'butt'
        },
        lineCap:'butt'
      },
      lineCap:'butt'

       
    }
  }),
  mounted () {
    this.renderChart(this.chartdata.datacollection, this.options)
  }
}
</script>

この形ですと、以下のようにdataの内容に関わらず、ボーダーが一周し閉じてしまいます。

しかし、そうではなく例えば分析結果(dataの内容)が「76/100」であった場合は、ボーダーは途中までしか表示されないようにしたいと考えています。

Chartjsの公式ドキュメントなどを読み調べているのですが、どのようにプロパティの調整を行えば良いか分からない状況です。
こちらの問題解決の為、どなたかご助言頂けましたら幸いです。