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="bar" 
              data-mdb-dataset-label="Total Orders" 
              data-mdb-labels="['Jul', 'Aug' , 'Sep' , 'Oct' , 'Nov' , 'Dec']" 
              data-mdb-dataset-data="[212, 183, 165, 193, 265, 221]">
            </canvas>
        </div>
      </div>