<template>
    <div class="container-fluid px-3">
        <div class="row">
            <div class="col-xl-6 col-lg-12 col-12  mb-3 px-2">
                <div class="card-body rounded_8 bg-white">
                    <h6 class=" border-0 card-title   text-dark">
                        Best Selling Category
                    </h6>
                    <pie-chart style="height: 220px;" :donut="true" :data="[['Blueberry', 44], ['Strawberry', 23]]"></pie-chart>
                </div>
            </div>

            <div class="col-xl-6 col-lg-12 col-12  mb-3 px-2">
                <div class="card-body rounded_8 bg-white">
                    <h6 class=" border-0 card-title   text-dark">
                        Best Selling Category
                    </h6>
                    <column-chart style="height: 220px;" :data="[['Sun', 32], ['Mon', 46], ['Tue', 28]]"></column-chart>
                </div>
            </div>
            <div class="col-xl-6 col-lg-12 col-12  mb-3 px-2">
                <div class="card-body rounded_8 bg-white">
                    <h6 class=" border-0 card-title   text-dark">
                        Best Selling Category
                    </h6>
                   <line-chart style="height: 220px;" :data="{'2021-01-01': 11, '2021-01-02': 6}"></line-chart>
                </div>
            </div>
            <div class="col-xl-6 col-lg-12 col-12  mb-3 px-2">
                <div class="card-body rounded_8 bg-white">
                    <h6 class=" border-0 card-title   text-dark">
                        Best Selling Category
                    </h6>
                    <bar-chart style="height: 220px;" :data="[['Work', 32], ['Play', 1492]]"></bar-chart>
                </div>
            </div>


               <div class="col-xl-6 col-lg-12 col-12  mb-3 px-2">
                <div class="card-body rounded_8 bg-white">
                    <h6 class=" border-0 card-title   text-dark">
                        Best Selling Category
                    </h6>
                    <scatter-chart style="height: 220px;" :data="[[174.0, 80.0], [176.5, 82.3]]" xtitle="Size" ytitle="Population"></scatter-chart>
                </div>
            </div>
        </div>
    </div>
</template>
