Как совместить несколько круговых диаграмм в интерфейсе Kendo с Angular-Kendo и Bootstrap?

Question

У меня есть 2 круговые диаграммы кендо. Для простоты предположим, что одни и те же графики. Я просто хочу выровнять их рядом друг с другом на панели Bootstrap. Я использую директивы углового кендо для круговых диаграмм. Вот код, который я написал, но вместо выравнивания рядом я получаю одну диаграмму, уменьшенную до небольшого размера в следующей строке.

<div class="panel panel-default">
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-6">
                <div kendo-chart k-options="pie" k-data-source="countries" />
            </div>
            <div class="col-lg-6">
                <div kendo-chart k-options="pie" k-data-source="countries" />
            </div>
        </div>
    </div>
</div>

Я определил источник данных и параметры пирога в коде контроллера:

 $scope.pie = {
        title: {
            position: "bottom",
            text: "WLAN"
        },
        legend: {
            visible: false
        },
        chartArea: {
            background: ""
        },
        seriesDefaults: {
            labels: {
                visible: true,
                background: "transparent",
                template: "#= category #: #= value#%",

            }
        },
        series: [{
            type: "pie",
            field: "value",
            categoryField: "category",
            padding: 100
        }],
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    };

    $scope.countries = {
        data: [
            {
                category: "blizzard",
                value: 53.8,
                color: "#9de219"
            }, {
                category: "alpha",
                value: 16.1,
                color: "#90cc38"
            }, {
                category: "hurricane",
                value: 11.3,
                color: "#068c35"
            },
        ]
    };