[Solved] Label in the Pie chart center

[BuildBinder]

Hi,

I´ve a pie chart with two data,

I need just one of the data labels in the center of the chart,

I´m trying to using the visual property with kendo.drawing.Text

 

labels: {
visual: function (e)
        {
         var x = 0;
           var y = 0;
               return new kendo.drawing.Text("65.99 %", [x, y], { font: "4em 'Open Sans', sans-serif", fill: { color: "red" } });
        }
}

 

but I don´t know how I can calculate the center of the char, because I need the size of the main div.

Thanks,

Jose

 

 

 

 

 

 

 

 

[T. Tsonev]

Hello,

I'm copying the reply to your support ticket for community reference.

The how-to article for this scenario will be published shortly at Donut Chart - Placing Text in the Center.

Regards,
T. Tsonev
Telerik

 

 

[BuildBinder]

Hi,

Your snippet gave me some ideas, and finally I have the result that I need.

I solved as follows:

 

seriesDefaults: {
   labels: {
         visible: function (e) {
                     percentage = e.percentage * 100;
                     return false;
        }
 },
series: [{
   type: "pie",
   field: "data",
   data: datapie,
   visual: function (e)
     {
      center = e.center;
      return e.createVisual();
     }
  }],
render: function (e)
  {
     var font = "bold 3em 'Open Sans', sans-serif";
     var places = "2";
     
     percentage = +(Math.round(percentage + "e+" + places) + "e-" + places);

 

     var txtpercentage = percentage.toString() + "%";
     var text = new draw.Text(txtpercentage, [0, 0], { font: font, fill: { color: "navy" } });

 

     var width = text.bbox().size.width;
     var height = text.bbox().size.height;

 

     text.position([Math.round(center.x - (width / 2)), Math.round(center.y - (height / 2))]);

 

     var group = new kendo.drawing.Group({
         zIndex: 1
     });


     group.append(text);

     chart._plotArea.appendVisual(group);
}

 

Thanks for the support.