Composition / Beginner

Pie Chart

Show proportions and percentages of a whole.

Interactive Chart Preview

JAVASCRIPT

Live, interactive exampleChart.js

Edit the column names and values to update your chart. Changes stay in this page until you reload.

Chart data editor
Row#	Category	Number	Remove row
1
2
3
4

4 / 200 rows

Use different slice names and nonnegative values with a positive total. Percentages are calculated automatically.

Chart.js Code Example

JAVASCRIPT

import Chart from 'chart.js/auto';

// Illustrative data used by the live preview.
const chartData = {
  "categoryLabel": "Device",
  "labels": [
    "Desktop",
    "Mobile",
    "Tablet",
    "Other"
  ],
  "datasets": [
    {
      "label": "Value",
      "data": [
        45,
        35,
        15,
        5
      ],
      "backgroundColor": [
        "#8b5cf6",
        "#06b6d4",
        "#f59e0b",
        "#ef4444"
      ],
      "borderWidth": 2,
      "borderColor": "#ffffff"
    }
  ]
};

function createConfig(chartData) {
    let chartType = 'bar';
    let options = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
            },
            tooltip: {
                mode: 'index',
                intersect: false,
            },
        },
    };
    chartType = 'pie';
    options.plugins.tooltip = {
        callbacks: {
            label: function (context) {
                const total = context.dataset.data.reduce((sum, value) => sum + value, 0);
                const percent = total > 0 ? ((context.parsed / total) * 100).toFixed(1) : '0.0';
                return `${context.label}: ${context.parsed} (${percent}%)`;
            },
        },
    };
    return { type: chartType, data: structuredClone(chartData), options };
}

const chart = new Chart(document.getElementById('myChart'), createConfig(chartData));

Preview and code follow the same library selection.

Run This Example

Install the package below in a browser project such as Vite. Put the copied code in a client JavaScript module and add this container to the page before the module runs.

npm install chart.js@4.5.1

<div style="height:320px"><canvas id="myChart"></canvas></div>

The example includes its sample data. When removing the chart, destroy or dispose of its instance and disconnect any resize observer.

Reading This Example

The default Chart.js example uses illustrative device shares: Desktop 45%, Mobile 35%, Tablet 15%, and Other 5%. Desktop is the largest slice, but it is less than half of the total. Desktop and Mobile together account for 80%.

All library tabs use these illustrative values. Rendering styles and library APIs differ, so use the table to compare exact numbers.

About this example & sample data

Sample values used in the chart
Device	Share (%)
Desktop	45
Mobile	35
Tablet	15
Other	5

READ THE CHART

Make the Whole and Its Parts Clear

A pie chart divides a circle into slices that represent parts of one total. It works best with a small number of nonnegative, mutually exclusive categories when a reader needs a broad sense of composition.

Define the Denominator

Use values from the same population and time period. Each item must belong to one category, and the categories should cover the whole. Overlapping survey responses or unrelated totals do not form a meaningful pie.

Label Values Directly

Show category names and percentages so readers do not have to estimate angles or rely only on color. Calculate each percentage as its value divided by the total. Round labels consistently.

Limit Small Slices

Many thin slices make comparisons difficult. Combine minor categories only when the grouping is meaningful, and say what the grouped category contains. Avoid 3D effects that distort the apparent size of slices.

Switch for Precise Comparisons

Use a bar chart when values are close or there are many categories. A donut chart offers space for a central label, but it still has the same limits for precise part-to-part comparisons.