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

Label in the Pie chart center

2 Answers 184 Views
Charts
This is a migrated thread and some comments may be shown as answers.
BuildBinder
Top achievements
Rank 1
BuildBinder asked on 02 Dec 2015, 11:14 PM

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

 
 
 
 
 
 
 
 

2 Answers, 1 is accepted

Sort by
0
Accepted
T. Tsonev
Telerik team
answered on 04 Dec 2015, 04:37 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
BuildBinder
Top achievements
Rank 1
answered on 05 Dec 2015, 07:04 PM
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.
 
Tags
Charts
Asked by
BuildBinder
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
BuildBinder
Top achievements
Rank 1
Share this question
or