（Kendo UI，Angular）饼图不会居中

Question

我的标记如下：

<div id="severity-piechart">
  <div ng-controller="SingleDetailsPieCtrl">
    <div kendo-chart k-theme="'metro'" k-title="{ text: 'All Issues', positon: 'top' }" 
      k-series-defaults="{ type: 'pie', 
                           labels: { 
                             visible: true, 
                             background: 'transparent', 
                             template: '#= category #: \n #= value#' 
                           } }"
      k-series=" [{ data: [{category: 'Issues', value: 14, color: '#FF0044'},
                           {category: 'Warnings', value: 4, color: '#FFD023'},
                           {category: 'Messages', value: 2, color: '#0B6FE8'}],
                 }]"
      k-legend="{ visible: false }"
      style="height: 35vh" >
    </div>                         
  </div>
</div>

每当我尝试位于answers的示例时，只要触摸样式属性，我就可以对图表执行任何操作。但是，当我在这个例子中做同样的事情时：

<div id="severity-piechart">
  <div ng-controller="SingleDetailsPieCtrl">
    <div kendo-chart k-theme="'metro'" k-title="{ text: 'All Issues', positon: 'top' }"
         k-series-defaults="{ type: 'pie', 
                              labels: { visible: true, background: 'transparent', 
                                        template: '#= category #: \n #= value#' } }"
         k-series=" [{data: [{category: 'Issues', value: 14, color: '#FF0044'},
                             {category: 'Warnings', value: 4, color: '#FFD023'},
                             {category: 'Messages', value: 2, color: '#0B6FE8'}],
                      }]"
         k-legend="{ visible: false }"
         style="height: 35vh; width: 50%; margin: 0 auto; display: block;" >
    </div>                         
  </div>
</div>

图表变得非常小，它没有居中，所有标签都被剪裁了。

有没有人遇到类似的情况？