It appears that no matter what I try, the hoverOffset property is not working on my doughnut charts.
Here's the component code:
<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>This is the testing data I'm using:
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 here is the front-end implementation:
<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>In summary, I have two doughnut charts in a container side by side, but modifying the hoverOffset property does not produce any visible change.