This is a migrated thread and some comments may be shown as answers.

Donut Chart Sizing

1 Answer 117 Views
Charts
This is a migrated thread and some comments may be shown as answers.
IT Purchasing
Top achievements
Rank 1
IT Purchasing asked on 05 Feb 2014, 07:11 PM
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"
                       },
                   }]
               });

1 Answer, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 07 Feb 2014, 03:20 PM
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

Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

Tags
Charts
Asked by
IT Purchasing
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or