<div class="row">
    <!-- Column -->
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div>
                        <h2>2376
                            <i class="ti-angle-down font-14 text-danger"></i>
                        </h2>
                        <h6>Order Received</h6>
                    </div>
                    <div class="ml-auto">
                        <div style="height: 55px; width: 70px">
                            <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels"
                                [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend"
                                [chartType]="barChartType">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div>
                        <h2 class="">3670
                            <i class="ti-angle-up font-14 text-success"></i>
                        </h2>
                        <h6>Tax Deduction</h6>
                    </div>
                    <div class="ml-auto">
                        <div style="height: 55px; width: 70px">
                            <canvas baseChart [datasets]="barChartData1" [labels]="barChartLabels1"
                                [options]="barChartOptions1" [colors]="barChartColors1" [legend]="barChartLegend1"
                                [chartType]="barChartType1">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div>
                        <h2>1562
                            <i class="ti-angle-up font-14 text-success"></i>
                        </h2>
                        <h6>Revenue Stats</h6>
                    </div>
                    <div class="ml-auto">
                        <div style="height: 55px; width: 70px">
                            <canvas baseChart [datasets]="barChartData2" [labels]="barChartLabels2"
                                [options]="barChartOptions2" [colors]="barChartColors2" [legend]="barChartLegend2"
                                [chartType]="barChartType2">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div>
                        <h2>35%
                            <i class="ti-angle-down font-14 text-danger"></i>
                        </h2>
                        <h6>Yearly Sales</h6>
                    </div>
                    <div class="ml-auto">
                        <div style="height: 55px; width: 70px">
                            <canvas baseChart [datasets]="barChartData3" [labels]="barChartLabels3"
                                [options]="barChartOptions3" [colors]="barChartColors3" [legend]="barChartLegend3"
                                [chartType]="barChartType3">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>