<div class="col-xl-6 col-lg-12 order-lg-2 order-xl-1" id="dash5cust">

    <!--begin:: Widgets/Best Sellers-->
    <div class="kt-portlet kt-portlet--height-fluid">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">
                    Top 5 Customers(by Job Requested)
                </h3>
            </div>
            <div class="kt-portlet__head-toolbar">
                <ul class="nav nav-pills nav-pills-sm nav-pills-label nav-pills-bold" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#kt_widget5_tab1_content" role="tab">
                            Latest
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#kt_widget5_tab2_content" role="tab">
                            Last Month
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#kt_widget5_tab3_content" role="tab">
                            Last 3 Month
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="kt-portlet__body">
            <div id="chartdiv1"></div>
        </div>
    </div>

    <!--end:: Widgets/Best Sellers-->
</div>

<script>
    am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    var chart = am4core.create("chartdiv1", am4charts.XYChart);
    chart.padding(40, 40, 40, 40);

    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.dataFields.category = "network";
    categoryAxis.renderer.minGridDistance = 1;
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.disabled = true;

    var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.min = 0;

    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryY = "network";
    series.dataFields.valueX = "MAU";
    //series.tooltipText = "{valueX.value}"
    series.columns.template.tooltipText = "[bold]{valueX}[/]";
    series.columns.template.strokeOpacity = 0;
    series.columns.template.column.cornerRadiusBottomRight = 5;
    series.columns.template.column.cornerRadiusTopRight = 5;

    var labelBullet = series.bullets.push(new am4charts.LabelBullet())
    labelBullet.label.horizontalCenter = "left";
    labelBullet.label.dx = 10;
    labelBullet.label.text = "{values.valueX.workingValue.formatNumber('#.0as')}";
    labelBullet.locationX = 1;

    // as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
    series.columns.template.adapter.add("fill", function(fill, target){
    return chart.colors.getIndex(target.dataItem.index);
    });

    categoryAxis.sortBySeries = series;
    chart.data = [
        {
        "network": "First Construction Singapore Pte Ltd",
        "MAU": 200
        },
        {
        "network": "True Design Pte Ltd",
        "MAU": 100
        },
        {
        "network": "Singapore Recreation Club",
        "MAU": 40
        },
        {
        "network": "MEGA HARDWARE PTE LTD",
        "MAU": 50
        },{
        "network": "Fitness Concept Specialist Chain Sdn Bhd",
        "MAU": 75
        }
    ]



    }); // end am4core.ready()
</script>