I have this:

Is it possible to animate one section of this chart, a Pie, on hover to make it grow, as in offset by either giving it padding or a different height?

I think this should be possible because on their site it says " Animate everything!", but haven't had any luck yet. Tried using events but not working.

// Doughnut chart
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [11, 47, 53],
            backgroundColor: ['rgb(137, 207, 191)', 'rgb(140, 187, 206)', 'rgb(144, 156, 209)']
        }],
        labels: [
            'Elementary',
            'Middle School',
            'High School'
        ],

    },
    options: {
        cutoutPercentage: 60,
        title: {
            display: true,
            text: 'Grade',
            position: 'top',
            fontFamily: 'sans-serif',
            fontSize: 18,
            fontColor: 'rgb(97, 98, 116)',
            padding: '20'
        },
        layout: {
            padding: {
                top: 20,
            }
        },
        legend: {
            display: true,
        }, 
        onHover: stuff,
        slices: {
            1: {
                offset: .5
            }
        }
    }
});

function stuff(e) {
    var activePoints = myDoughnutChart.getElementsAtEvent(e);
    console.log(activePoints);
}

Thanks for any help.

I have this:

Is it possible to animate one section of this chart, a Pie, on hover to make it grow, as in offset by either giving it padding or a different height?

I think this should be possible because on their site it says " Animate everything!", but haven't had any luck yet. Tried using events but not working.

// Doughnut chart
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [11, 47, 53],
            backgroundColor: ['rgb(137, 207, 191)', 'rgb(140, 187, 206)', 'rgb(144, 156, 209)']
        }],
        labels: [
            'Elementary',
            'Middle School',
            'High School'
        ],

    },
    options: {
        cutoutPercentage: 60,
        title: {
            display: true,
            text: 'Grade',
            position: 'top',
            fontFamily: 'sans-serif',
            fontSize: 18,
            fontColor: 'rgb(97, 98, 116)',
            padding: '20'
        },
        layout: {
            padding: {
                top: 20,
            }
        },
        legend: {
            display: true,
        }, 
        onHover: stuff,
        slices: {
            1: {
                offset: .5
            }
        }
    }
});

function stuff(e) {
    var activePoints = myDoughnutChart.getElementsAtEvent(e);
    console.log(activePoints);
}

Thanks for any help.

• javascript
• css
• chart.js
• chart.js2

2 Answers 2

Add this code in update function of doughnut

var innerRadius = reset && animationOpts.animateScale ? 0 : me.innerRadius;
if (index == doughnutIndex) {
   innerRadius = innerRadius + 10;
}

And add a new function setHoverStyle

    setHoverStyle: function(arc) {
        doughnutIndex = arc._index;
        this.update();
    },

If what you are wanting is for the section to move outward on hover, that is done with simply setting hoverOffset with a number. See this example and documentation here.