---
title: "Charts"
group: charts
---


<div class="row">
  <div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="mb-3 card">
      <div class="card-header">Bar Basic</div>
      <div class="card-body">
        <canvas height="200" id="bar"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="mb-3 card">
      <div class="card-header">Bar Horizontal</div>
      <div class="card-body">
        <canvas height="200" id="barHorizontal"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="mb-3 card">
      <div class="card-header">Bar Stacked</div>
      <div class="card-body">
        <canvas height="200"id="barStacked"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="mb-3 card">
      <div class="card-header">Line Basic</div>
      <div class="card-body">
        <canvas height="200" id="lineBasic"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="mb-3 card">
      <div class="card-header">Line Stepped</div>
      <div class="card-body">
        <canvas height="200" id="lineStepped"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="mb-3 card">
      <div class="card-header">Line Points</div>
      <div class="card-body">
        <canvas height="200" id="linePoints"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="mb-3 card">
      <div class="card-header">Line and Bar Mixed</div>
      <div class="card-body">
        <canvas height="200" id="lineAndBar"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="mb-3 card">
      <div class="card-header">Misc Bubble</div>
      <div class="card-body">
        <canvas height="200" id="bubble"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="mb-3 card">
      <div class="card-header">Misc Doughnut</div>
      <div class="card-body">
        <canvas height="200" id="doughnut"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="mb-3 card">
      <div class="card-header">Misc Pie</div>
      <div class="card-body">
        <canvas height="200" id="pie"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="mb-3 card">
      <div class="card-header">Misc Polar</div>
      <div class="card-body">
        <canvas height="200" id="polar"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="mb-3 card">
      <div class="card-header">Misc Radar</div>
      <div class="card-body">
        <canvas height="200" id="radar"></canvas>
      </div>
    </div>
  </div>
</div>