Donut Chart Sizing

[IT Purchasing]

Please see that attached.  We have a few donut charts and want the labels on them.  We have done what we can to reduce the size, but the labels and chart title still seem to get cut off (see attached pictures).  This is in a responsive UI, and it seems the labels are not always counted when using the "$(this).data("kendoChart").redraw()" method.

$("#" + chartDiv).kendoChart({
                   title: {
                       text: chartName + " " + chartLabel
                   },
                   legend: {
                       visible: false,
                       position: "bottom"
                   },
                   seriesDefaults: {
                       type: "donut",
                       startAngle: 150
                   },
                   theme: defaultTheme,
                   series: [{
                       name: "Prior Period",
                       overlay: { gradient: "none" },
                       categoryField: "Value.Description",
                       field: "Value.Value",
                       tooltip: {
                           visible: true,
                           template: "${dataItem.Value.Description} - ${dataItem.Value.FormattedValue} - Prior Period"
                       },
                       data: jsonPrior
                   }, {
                       name: labelDateRange,
                       overlay: { gradient: "none" },
                       categoryField: "Value.Description",
                       field: "Value.Value",
                       tooltip: {
                           visible: true,
                           template: "${dataItem.Value.Description} - ${dataItem.Value.FormattedValue} - " + labelDateRange
                       },
                       data: jsonData,
                       labels: {
                           template: "${dataItem.Value.Description} - ${dataItem.Value.FormattedValue}",
                           position: "outsideEnd",
                           font: "10px Arial,Helvetica,sans-serif",
                           align: "circle",
                           visible: true,
                           distance: 15,
                           background: "transparent"
                       },
                   }]
               });

[Iliana Dyankova]

Hi,

There is no a built-in solution for this case. As a possible workaround I can suggest changing the configuration of the series.labels after particular metrics of the browser viewport. As an example: 

$(window).resize(function () {
  //....
  var chart = $("#chart").data("kendoChart");
  if($(window).height()<400 && $(window).width()< 400){
    //for example hide the labels of the second series
    chart.options.series[1].labels.visible = false
    chart.redraw();
  }
});

Regards,
Iliana Nikolova
Telerik