Bootstrap Charts - Adminkit

Discover 2 Bootstrap Charts available in Adminkit

Chart Line

<div class="card flex-fill w-100 draggable">
    <div class="card-header">
        <h5 class="card-title mb-0">Recent Movement</h5>
    </div>
    <div class="card-body py-3">
        <div class="chart chart-sm"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
            <canvas id="chartjs-dashboard-line" style="display: block; height: 252px; width: 428px;" width="856" height="504" class="chart-line chartjs-render-monitor"></canvas>
        </div>
    </div>
</div>

Chart Pie

<div class="card flex-fill w-100 draggable">
    <div class="card-header">
        <h5 class="card-title mb-0">Browser Usage</h5>
    </div>
    <div class="card-body d-flex">
        <div class="align-self-center w-100">
            <div class="py-3">
                <div class="chart chart-xs"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                    <canvas id="chartjs-dashboard-pie" width="856" height="400" style="display: block; height: 200px; width: 428px;" class="chart-pie chartjs-render-monitor"></canvas>
                </div>
            </div>

            <table class="table mb-0">
                <tbody>
                    <tr>
                        <td>Chrome</td>
                        <td class="text-end">4306</td>
                    </tr>
                    <tr>
                        <td>Firefox</td>
                        <td class="text-end">3801</td>
                    </tr>
                    <tr>
                        <td>IE</td>
                        <td class="text-end">1689</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>