Charts

Simple yet flexible Javascript charting for designers & developers

Usage

In order to use this charts on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

<script src="/assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="/assets/vendor/chart.js/dist/Chart.extension.js"></script>

After that, simply copy one of the code examples demonstrated below and include it in your page.

Examples

Line chart

<!--* Card init *-->
<div class="card">
   <!-- Card header -->
   <div class="card-header">
      <!-- Title -->
      <h5 class="h3 mb-0">Line chart</h5>
   </div>
   <!-- Card body -->
   <div class="card-body">
      <div class="chart">
         <!-- Chart wrapper -->
         <canvas id="chart-line" class="chart-canvas"></canvas>
      </div>
   </div>
</div>

Line Chart Example

<a href="#!" class="avatar">
    <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-4.jpg">
</a>
<a href="#!" class="avatar rounded-circle">
    <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-4.jpg">
</a>

Bars Table Example

Bars chart

<!--* Card init *-->
<div class="card">
   <!-- Card header -->
   <div class="card-header">
      <!-- Title -->
      <h5 class="h3 mb-0">Bars chart</h5>
   </div>
   <!-- Card body -->
   <div class="card-body">
      <div class="chart">
         <!-- Chart wrapper -->
         <canvas id="chart-bars" class="chart-canvas"></canvas>
      </div>
   </div>
</div>

Points Table Example

Points chart

<!--* Card init *-->
<div class="card">
   <!-- Card header -->
   <div class="card-header">
      <!-- Title -->
      <h5 class="h3 mb-0">Points chart</h5>
   </div>
   <!-- Card body -->
   <div class="card-body">
      <div class="chart">
         <!-- Chart wrapper -->
         <canvas id="chart-points" class="chart-canvas"></canvas>
      </div>
   </div>
</div>

Doughnut Table Example

Doughnut chart

<!--* Card init *-->
<div class="card">
   <!-- Card header -->
   <div class="card-header">
      <!-- Title -->
      <h5 class="h3 mb-0">Doughnut chart</h5>
   </div>
   <!-- Card body -->
   <div class="card-body">
      <div class="chart">
         <!-- Chart wrapper -->
         <canvas id="chart-doughnut" class="chart-canvas"></canvas>
      </div>
   </div>
</div>

Pie Table Example

Pie chart

<!--* Card init *-->
<div class="card">
   <!-- Card header -->
   <div class="card-header">
      <!-- Title -->
      <h5 class="h3 mb-0">Pie chart</h5>
   </div>
   <!-- Card body -->
   <div class="card-body">
      <div class="chart">
         <!-- Chart wrapper -->
         <canvas id="chart-pie" class="chart-canvas"></canvas>
      </div>
   </div>
</div>

Bar stacked Table Example

Bar stacked chart

<!--* Card init *-->
<div class="card">
   <!-- Card header -->
   <div class="card-header">
      <!-- Title -->
      <h5 class="h3 mb-0">Bar stacked chart</h5>
   </div>
   <!-- Card body -->
   <div class="card-body">
      <div class="chart">
         <!-- Chart wrapper -->
         <canvas id="chart-bar-stacked" class="chart-canvas"></canvas>
      </div>
   </div>
</div>

Dark card with chart Example

<div class="card bg-default">
    <div class="card-body">
        <div class="chart">
            <!-- Chart wrapper -->
            <canvas id="chart-sales" class="chart-canvas"></canvas>
        </div>
    </div>
</div>