resto-dhepot/resources/views/pages/admin/dashboard/chart.blade.php

<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Paket Spesial Terlaris</h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-tool" data-card-widget="remove">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="chart-responsive">
                                    <canvas id="pieChartPaket" height="150"></canvas>
                                </div>
                                <!-- ./chart-responsive -->
                            </div>
                            <div class="col-md-6">
                                <ul class="chart-legend clearfix" id="menuPaketLegend">
                                </ul>
                                <!-- ./chart-responsive -->
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
            <!-- /.col-lg-3 -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Paket Irit Terlaris</h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-tool" data-card-widget="remove">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="chart-responsive">
                                    <canvas id="pieChartIrit" height="150"></canvas>
                                </div>
                                <!-- ./chart-responsive -->
                            </div>
                            <div class="col-md-6">
                                <ul class="chart-legend clearfix" id="menuIritLegend">
                                </ul>
                                <!-- ./chart-responsive -->
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
            <!-- /.col-lg-3 -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</div>
<!-- /.content -->


<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Nasi Terlaris</h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-tool" data-card-widget="remove">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="col-md-12">
                            <div class="chart-responsive">
                                <canvas id="pieChartNasi" height="150"></canvas>
                            </div>
                            <!-- ./chart-responsive -->
                        </div>
                        <div class="col-md-12">
                            <br>
                            <ul class="chart-legend clearfix" id="menuNasiLegend">
                            </ul>
                            <br>
                            <!-- ./chart-responsive -->
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
            <!-- /.col-lg-3 -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Sambal Terlaris</h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-tool" data-card-widget="remove">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="col-md-12">
                            <div class="chart-responsive">
                                <canvas id="pieChartSambal" height="150"></canvas>
                            </div>
                            <!-- ./chart-responsive -->
                        </div>
                        <div class="col-md-12">
                            <br>
                            <ul class="chart-legend clearfix" id="menuSambalLegend">
                            </ul>
                            <br>
                            <!-- ./chart-responsive -->
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
            <!-- /.col-lg-3 -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Lauk Terlaris</h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-tool" data-card-widget="remove">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="chart-responsive">
                                    <canvas id="pieChartLauk" height="150"></canvas>
                                </div>
                                <!-- ./chart-responsive -->
                            </div>
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6">
                                        <ul class="chart-legend clearfix" id="menuLaukLegend1">
                                        </ul>
                                        <!-- ./chart-responsive -->
                                    </div>
                                    <div class="col-md-6">
                                        <ul class="chart-legend clearfix" id="menuLaukLegend2">
                                        </ul>
                                        <!-- ./chart-responsive -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
            <!-- /.col-lg-3 -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</div>
<!-- /.content -->