# 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>