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