Chart.js Demos

One stop solution for perfect admin dashboard!

Toggle Code!
Bar Chart
                                                        
<canvas id="bar" class="mb-20"></canvas>
<button type="button" id="randomizeDataBar" class="btn btn-default btn-rounded">Randomize Data</button>
<button type="button" id="addDatasetBar" class="btn btn-default btn-rounded">Add Dataset</button>
<button type="button" id="removeDataset" class="btn btn-default btn-rounded">Remove Dataset</button>
<button type="button" id="addData" class="btn btn-default btn-rounded">Add Data</button>
<button type="button" id="removeData" class="btn btn-default btn-rounded">Remove Data</button>
<!-- ========== JS ========== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="js/chartjs/utils.js"></script>
<script src="js/chartjs/globalchartjs.js"></script>
Column with rotated labels
                                                        
<canvas id="line" class="mb-20"></canvas>
<button id="randomizeDataline"  class="btn btn-default btn-rounded">Randomize Data</button>
<button id="addDatasetline"  class="btn btn-default btn-rounded">Add Dataset</button>
<button id="removeDatasetline"  class="btn btn-default btn-rounded">Remove Dataset</button>
<button id="addDataline"  class="btn btn-default btn-rounded">Add Data</button>
<button id="removeDataline"  class="btn btn-default btn-rounded">Remove Data</button>
<!-- ========== JS ========== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="js/chartjs/utils.js"></script>
<script src="js/chartjs/globalchartjs.js"></script>
Radar Chart
                                                        
<canvas id="radar" class="mb-20"></canvas>
<button id="randomizeDataradar" class="btn btn-default btn-rounded">Randomize Data</button>
<button id="addDatasetradar" class="btn btn-default btn-rounded">Add Dataset</button>
<button id="removeDatasetradar" class="btn btn-default btn-rounded">Remove Dataset</button>
<button id="addDataradar" class="btn btn-default btn-rounded">Add Data</button>
<button id="removeDataradar" class="btn btn-default btn-rounded">Remove Data</button>
<!-- ========== JS ========== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="js/chartjs/utils.js"></script>
<script src="js/chartjs/globalchartjs.js"></script>
Dual axes, line and column
                                                        
<div id="canvas-holder">
    <canvas id="chart-area-pie" class="mb-20"></canvas>
</div>
<button id="randomizeDataPie" class="btn btn-default btn-rounded">Randomize Data</button>
<button id="addDatasetPie" class="btn btn-default btn-rounded">Add Dataset</button>
<button id="removeDatasetPie" class="btn btn-default btn-rounded">Remove Dataset</button>
<!-- ========== JS ========== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="js/chartjs/utils.js"></script>
<script src="js/chartjs/globalchartjs.js"></script>
DataPoints-customTooltips
                                                        
<div id="canvas-holder1">
	<canvas id="datachart"></canvas>
</div>
<div class="chartjs-tooltip" id="tooltip-0"></div>
<div class="chartjs-tooltip" id="tooltip-1"></div>
<!-- ========== JS ========== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="js/chartjs/utils.js"></script>
<script src="js/chartjs/globalchartjs.js"></script>
Combo Bar Line
                                                        
<canvas id="combo-bar-line" class="mb-20"></canvas>
<button id="randomizeData-combo-bar-line" class="btn btn-default btn-rounded">Randomize Data</button>
<!-- ========== JS ========== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="js/chartjs/utils.js"></script>
<script src="js/chartjs/globalchartjs.js"></script>