Chart.js Doughnut Chart — Browser Share

A doughnut chart showing browser market share. Each segment gets a distinct color, and the legend maps colors to labels. Hover over a segment to see its percentage.

Doughnut vs. Pie: Change type: 'doughnut' to type: 'pie' and the center hole disappears. The data and config are otherwise identical. Doughnuts are generally preferred because the center space can hold summary text or a KPI.

The Code

new Chart(document.getElementById('doughnutChart'), {
    type: 'doughnut',
    data: {
        labels: ['Chrome', 'Safari', 'Firefox', 'Edge', 'Other'],
        datasets: [{
            data: [59, 24, 10, 5, 2],
            backgroundColor: [
                '#4285F4',   // Chrome blue
                '#FF6D01',   // Safari orange
                '#FF4500',   // Firefox red-orange
                '#0078D4',   // Edge blue
                '#999999'    // Other gray
            ],
            borderColor: '#fff',
            borderWidth: 3,
            hoverBorderWidth: 0,
            hoverOffset: 8
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Browser Market Share (2025)',
                font: { size: 18 }
            },
            legend: {
                position: 'bottom',
                labels: {
                    padding: 20,
                    usePointStyle: true,
                    pointStyle: 'circle'
                }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.label + ': ' + context.parsed + '%';
                    }
                }
            }
        }
    }
});