Pie chart

Bootstrap 5 Pie chart component

Responsive Pie chart built with Bootstrap 5. Learn how to use the advanced example of a circular chart divided into sectors that are proportional to the quantity it represents.

Pie chart

A chart with the type pie splits the circle into several pieces to represent a dataset's values as an area's percentage.

Via data-mdb-attributes:

Edit in sandbox 
        
            
        <canvas
        data-mdb-chart-init
        data-mdb-chart="pie"
        data-mdb-dataset-label="Traffic"
        data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
        data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
        data-mdb-dataset-background-color="['rgba(63, 81, 181, 0.5)', 'rgba(77, 182, 172, 0.5)', 'rgba(66, 133, 244, 0.5)', 'rgba(156, 39, 176, 0.5)', 'rgba(233, 30, 99, 0.5)', 'rgba(66, 73, 244, 0.4)', 'rgba(66, 133, 244, 0.2)']"
      ></canvas>

Via JavaScript:

Edit in sandbox 
        
            
          <canvas id="pie-chart"></canvas>
        
        
    
        
            
        // Chart
        const dataPie = {
          type: 'pie',
          data: {
            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
            datasets: [
              {
                label: 'Traffic',
                data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                backgroundColor: [
                  'rgba(63, 81, 181, 0.5)',
                  'rgba(77, 182, 172, 0.5)',
                  'rgba(66, 133, 244, 0.5)',
                  'rgba(156, 39, 176, 0.5)',
                  'rgba(233, 30, 99, 0.5)',
                  'rgba(66, 73, 244, 0.4)',
                  'rgba(66, 133, 244, 0.2)',
                ],
              },
            ],
          },
        };
        
        new Chart(document.getElementById('pie-chart'), dataPie);