Chart.js - Doughnut and Pie Charts

Doughnut and Pie Charts in Chart.js are circular statistical graphics that are divided into slices to illustrate numerical proportions. Doughnut charts are similar to pie charts but contain a hole in the center, while pie charts do not. These charts are commonly used to represent the composition of a whole and visualize percentages or proportions.

Importance of Doughnut and Pie Charts

Doughnut and Pie charts are important for the following reasons:

Composition Visualization: Doughnut and Pie charts effectively illustrate the relative sizes of different categories or components within a whole, making it easy for viewers to understand the composition of the data set.
Percentage Representation: Each slice in a doughnut or pie chart represents a percentage of the whole, providing a clear visual representation of proportions and distributions.
Comparison of Parts: By comparing the sizes of slices, users can analyze the relative importance or significance of different categories or components.

Configuration Options

Chart.js provides options for configuring doughnut and pie charts:

Data: Specifies the data values and labels for each slice of the chart.
Chart Settings: Defines the appearance of the chart, including colors, borders, labels, and hover effects.
Animation: Configures animation options for the chart, such as duration, easing, and delay.

Examples

Let's explore examples of doughnut and pie charts in Chart.js:

1. Basic Doughnut Chart

Creating a basic doughnut chart:

// JavaScript
var ctx1 = document.getElementById('basicDoughnutChart').getContext('2d');
var basicDoughnutChart = new Chart(ctx1, {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
        datasets: [{
            label: 'Data Set',
            data: [20, 30, 10, 15, 25], // Data values
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)'
            ], // Slice colors
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)'
            ], // Slice border colors
            borderWidth: 1 // Slice border width
        }]
    },
    options: {...} // Additional options for customization
});

Conclusion

Doughnut and Pie charts in Chart.js are valuable tools for visualizing proportions and compositions. By customizing chart settings and data values, developers can create informative charts that effectively communicate percentages and distributions.