Using vue-charts.js, I cannot get hoverOffset to work with doughnut

Question

So it seems that no matter what I do, I can't get the hoverOffset property to do anything on my doughnuts.

Here's my component:

<script>

import { Doughnut } from 'vue-chartjs'

export default {
  extends: Doughnut,
  props: {
      chartData: {type: Object, default: null},
      options: {type: Object, default: null}
},
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

</script>

Here's my testing data:

      tempChartDataOne: {
        labels: [
          'something',
          'something',
          'something',
          'something',
          'something'
        ],
        datasets: [{
          label: 'My First Dataset',
          data: [20, 4, 7, 5, 2],
          backgroundColor: [
            'rgb(38, 153, 0)',
            'rgb(153, 204, 0)',
            'rgb(255, 153, 0)',
            'rgb(230, 0, 0)',
            'rgb(153, 0, 0)'
          ],
          hoverOffset: 4
        }]
      },
      tempChartDataTwo: {
        labels: [
          'something',
          'something',
          'something'
        ],
        datasets: [{
          label: 'My First Dataset',
          data: [3, 5, 10],
          backgroundColor: [
            'rgb(38, 153, 0)',
            'rgb(255, 205, 86)',
            'rgb(230, 0, 0)',
          ],
          hoverOffset: 4
        }],
        
      },
      tempChartOptions: {
        cutoutPercentage: 70,
        maintainAspectRatio: false,
      },

And then here is my front-end:

<div class="flex-chart-container">
            <div class="flex-chart-left">
              <doughnut-chart :chartData="tempChartDataOne" :options="tempChartOptions" ></doughnut-chart>
            </div>
            <div class="flex-chart-right">
              <doughnut-chart :chartData="tempChartDataTwo" :options="tempChartOptions"></doughnut-chart>
            </div>
</div>

Basicall, I have two doughnuts in a container together. Setting hoverOffset to any value has no effect.

Answer 1

The hoverOffset property got added to chart.js in version 3 of the lib. Vue-chartjs uses version 2 of the lib so until that wrapper is updated you wont be able to use the hoverOffset in your charts