[Chartjs]-ChartJS v2 – Outer arc when hover on a pie/doughnut segment

by

5👍

You could achieve that by setting the hoverBorderWidth for datasets

var ctx = document.getElementById("chart").getContext('2d');
var chart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["Microsoft Internet Explorer", "Google Chrome", "Mozilla Firefox", "Opera", "Safari"],
        datasets: [{
            label: 'Number of votes',
            data: [60, 20, 10, 8, 2],
            backgroundColor: ['#96ceff', '#424348', '#91ee7c', '#f7a35b', '#8286e9'],
            borderColor: '#fff',
            borderWidth: 1,
            hoverBorderColor: ['#96ceff', '#424348', '#91ee7c', '#f7a35b', '#8286e9'],
            hoverBorderWidth: 8
        }]
    },
    options: {
        responsive: false,
        legend: {
            display: false
        },
        tooltips: {
            displayColors: false
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="350" height="350"></canvas>

or, you could also create your own plugin.

Leave a comment