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/chartist.min.js"></script>

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

Examples

Straight Lines Chart

Line Chart with Points

Copy

<!--* Card init *-->
<div class="card card-chart">
  <div class="card-header card-header-warning">
    <div id="straightLinesChart" class="ct-chart"></div>
  </div>
  <div class="card-body">
    <h4 class="card-title">Straight Lines Chart</h4>
    <p class="card-category">Line Chart with Points</p>
  </div>
</div>

Rounded Line Chart

Line Chart

Copy

<div class="card card-chart">
  <div class="card-header card-header-rose">
    <div id="roundedLineChart" class="ct-chart"></div>
  </div>
  <div class="card-body">
    <h4 class="card-title">Rounded Line Chart</h4>
    <p class="card-category">Line Chart</p>
  </div>
</div>

Simple Bar chart PRO

Simple Bar Chart

Bar Chart

Copy

<div class="card card-chart">
  <div class="card-header card-header-info">
    <div id="simpleBarChart" class="ct-chart"></div>
  </div>
  <div class="card-body">
    <h4 class="card-title ">Simple Bar Chart</h4>
    <p class="card-category">Bar Chart</p>
  </div>
</div>

Rounded Line Chart PRO

Coloured Line Chart - Rounded

Copy

<div class="card">
  <div class="card-header card-header-icon card-header-info">
    <div class="card-icon">
      <i class="material-icons">timeline</i>
    </div>
    <h4 class="card-title">Coloured Line Chart
      <small> - Rounded</small>
    </h4>
  </div>
  <div class="card-body">
    <div id="colouredRoundedLineChart" class="ct-chart"></div>
  </div>
</div>

Multiple Bar Chart PRO

Multiple Bars Chart - Bar Chart

Copy

<div class="card">
  <div class="card-header card-header-icon card-header-rose">
    <div class="card-icon">
      <i class="material-icons">insert_chart</i>
    </div>
    <h4 class="card-title">Multiple Bars Chart
      <small>- Bar Chart</small>
    </h4>
  </div>
  <div class="card-body">
    <div id="multipleBarsChart" class="ct-chart"></div>
  </div>
</div>

Coloured Bar Charts PRO

Coloured Bars Chart - Rounded

Copy

<div class="card">
  <div class="card-header card-header-icon card-header-info">
    <div class="card-icon">
      <i class="material-icons">timeline</i>
    </div>
    <h4 class="card-title">Coloured Bars Chart
      <small> - Rounded</small>
    </h4>
  </div>
  <div class="card-body">
    <div id="colouredBarsChart" class="ct-chart"></div>
  </div>
</div>

Pie Chart

Legend

Apple Samsung Windows Phone

Copy

<div class="card card-chart">
  <div class="card-header card-header-icon card-header-danger">
    <div class="card-icon">
      <i class="material-icons">pie_chart</i>
    </div>
    <h4 class="card-title">Pie Chart</h4>
  </div>
  <div class="card-body">
    <div id="chartPreferences" class="ct-chart"></div>
  </div>
  <div class="card-footer">
    <div class="row">
      <div class="col-md-12">
        <h6 class="card-category">Legend</h6>
      </div>
      <div class="col-md-12">
        <i class="fa fa-circle text-info"></i> Apple
        <i class="fa fa-circle text-warning"></i> Samsung
        <i class="fa fa-circle text-danger"></i> Windows Phone
      </div>
    </div>
  </div>
</div>