Chart card

Bootstrap 5 Chart card component

Responsive Chart card built with Bootstrap 5. A simple and quick way to put a chart on a card.

Basic example

Put chart element in div with .card-body class.

performance

Edit in sandbox 
        
            
      <div class="card shadow-2-strong" style="width: 32rem;">
        <div class="card-body">
            <p class="text-uppercase mb-2"><strong>performance</strong></p>
            <hr />
            <canvas
              data-mdb-chart-init
              data-mdb-chart="bar"
              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]"
            ></canvas>
        </div>
      </div>