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