Pie chart - label text overlapping and 'outsideEnd' is not working

[chun]

Hello,

I'm trying to make a success and fail ratio pie chart now.
I have difficulty making label to be shown clearly.

First problem is that the 'outsideEnd' option is not working properly.
With 'outsideEnd', I guess the label should be positioned outside.
But in my case, the label is positioned inside of the pie.

Second, when I tried with 'circle' or 'column' option, the label text overlapping.
I couldn't find other option to arrange it properly.

Would you please kindly help me to do this?

The following my code;

        function createChart() {
          var dataSource = [
            {category: "FAIL", value1: 1970}, 
            {category: "Manual", value1: 8370}, 
            {category: "Automatics", value1: 185000}];

          $("#chart").kendoChart({
            title: { text: "" },
            legend: { position: "bottom", margin: { top: -3, bottom:0 }},
            dataSource: { data: dataSource, datatype: "number" },
            seriesDefaults: { type: "pie", categoryField: "category",
                             labels: {            
                               visible: true,
                               position: "outsideEnd",
                               background: "transparent",
                               //color:"#d9dbe8",
                               template: "#= category #: \n #= value # (#= kendo.format('{0:P}', percentage) #)"
                             }
                            },
            series:
            [
              { field: "value1", name: 'RATIO', overlay: { gradient: "none" }},
              { field: "value2", name: 'PIE_NM'}
            ],
            valueAxis: { format: "{0}%" },
            seriesClick: function(e) {},
            tooltip: { visible: true, 
                      format: "{0}%", 
                      template: "#= series.name #: #= value # (#= kendo.format('{0:P}', percentage) #)", 
                      background: "#2f3b51", 
                      color:"#fff", 
                      border:{width:0}}
          });  
        }

Thanks in advance.

[Stefan]

Hello, Chun,

Thank you for the details and the example.

Indeed, the option does not seems to behave as described. We will make additional tests to observe if this is indeed an issue and if it is I will log it and send share the link here.

In the meantime, please check if the "above" label option will achieve a result similar to the desired one:

labels: {
      visible: true,
      position: "above",

Regards,
Stefan
Progress Telerik

[Stefan]

Hello, Chun,

Apologies for missing an important setting.

The Pie Chart is using only one series, and setting multiple once can cause different issues:

https://docs.telerik.com/kendo-ui/controls/charts/chart-types/pie-charts#create-the-pie-chart

Once only one series is set the option is applied as expected:

https://dojo.telerik.com/opOzUSiS

Regards,
Stefan
Progress Telerik

[chun]

Hello, Mr.Stefan.

I made only one series for my chart and 'outsideEnd' worked well!

Thank you so much for your advise.

 

Best,

Chun