Doughnut chart

Bootstrap 5 Doughnut chart component

Responsive Doughnut chart built with Bootstrap 5. Learn how to create a bootstrap doughnut chart and see example of proper implementation and customization.

Basic example

You can initialize the donut chart with JS or via data-mdb-attributes which requires no additional JS code.

Via data-mdb-attributes:

Edit in sandbox 
        
            
              <canvas
                data-mdb-chart="doughnut"
                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="doughnut-chart"></canvas>
            
        
    
        
            
              // Chart
              const dataDoughnut = {
                type: 'doughnut',
                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 mdb.Chart(document.getElementById('doughnut-chart'), dataDoughnut);