Bootstrap Charts

The Bootstrap charts refer to a graphical representation of data.
Keep reading these 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:

Copy

<script src="../../assets/js/plugins/chartjs.min.js"></script>

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

Examples

Line chart example

Copy

<div class="card mb-3">
  <div class="card-body p-3">
    <div class="chart">
      <canvas id="line-chart" class="chart-canvas" height="300px"></canvas>
    </div>
  </div>
</div>

Line chart with gradient example

Copy

<div class="card mb-3">
  <div class="card-body p-3">
    <div class="chart">
      <canvas id="line-chart-gradient" class="chart-canvas" height="300px"></canvas>
    </div>
  </div>
</div>

Bar chart example

Copy

<div class="card mb-3">
  <div class="card-body p-3">
    <div class="chart">
      <canvas id="bar-chart" class="chart-canvas" height="300px"></canvas>
    </div>
  </div>
</div>

Bar chart horizontal example

Copy

<div class="card mb-3">
  <div class="card-body p-3">
    <div class="chart">
      <canvas id="bar-chart-horizontal" class="chart-canvas" height="300px"></canvas>
    </div>
  </div>
</div>

Mixed chart example

Copy

<div class="card mb-3">
  <div class="card-body p-3">
    <div class="chart">
      <canvas id="mixed-chart" class="chart-canvas" height="300px"></canvas>
    </div>
  </div>
</div>

Bubble chart example

Copy

<div class="card mb-3">
  <div class="card-body p-3">
    <div class="chart">
      <canvas id="bubble-chart" class="chart-canvas" height="140px"></canvas>
    </div>
  </div>
</div>

Doughnut chart example

Copy

<div class="card mb-3">
  <div class="card-body p-3">
    <div class="chart">
      <canvas id="doughnut-chart" class="chart-canvas" height="300px"></canvas>
    </div>
  </div>
</div>

Pie chart example

Copy

<div class="card mb-3">
  <div class="card-body p-3">
    <div class="chart">
      <canvas id="pie-chart" class="chart-canvas" height="300px"></canvas>
    </div>
  </div>
</div>

Radar chart example

Copy

<div class="card mb-3">
  <div class="card-body p-5">
    <div class="chart">
      <canvas id="radar-chart" class="chart-canvas" height="100px"></canvas>
    </div>
  </div>
</div>

Polar chart example

Copy

<div class="card mb-3">
  <div class="card-body p-5">
    <div class="chart">
      <canvas id="polar-chart" class="chart-canvas" height="100px"></canvas>
    </div>
  </div>
</div>