Label in the Pie chart center

3 posts, 1 answers
  1. Jose
    Jose avatar
    7 posts
    Member since:
    Dec 2015

    Posted 02 Dec 2015 Link to this post

    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. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 04 Dec 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Jose
    Jose avatar
    7 posts
    Member since:
    Dec 2015

    Posted 05 Dec 2015 in reply to T. Tsonev Link to this post

    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.
     
Back to Top