CODEWITHSUNDEEP
javascriptjquerycsskendo-uikendo-chart
Suraj Nair
Suraj Nair

Reputation: 561

Place text in kendo donut chart

I am trying to create a semi circle donut chart to show some progress data. This I was able to complete. Further I needed to place text inside/ center of the donut chart which again I was able to do successfully. Now I have a new requirement where I need to show some text on the start and end positions of the graph(I need 0% and 100% to be shown on either axis). I tried several ways without any ado. Can you please help me with a possible solution. Please find the dojo I created here:

http://dojo.telerik.com/Exike

This is roughly what I would like my end result to appear like:

Reference

Any suggestions for the same?

Thanks in advance.

Upvotes: 0

Views: 1613

Answers (2)

Roy John
Roy John

Reputation: 29

Use DonutCenterTemplate for that:

<ng-template kendoChartDonutCenterTemplate>
        <h3>99.5%</h3>
        Accepted
</ng-template>

Upvotes: 0

ezanker
ezanker

Reputation: 24738

You could add a couple of text boxes to your render function and use the bounding box to place them:

    render: function (e) {
            var draw = kendo.drawing;
            var geom = kendo.geometry;
            var chart = e.sender;

            // The center and radius are populated by now.
            // We can ask a circle geometry to calculate the bounding rectangle for us.                
            var circleGeometry = new geom.Circle(center, radius);
            var bbox = circleGeometry.bbox();

            // Render the text                
            var text = new draw.Text("33%", [0, 0], {
              font: "18px Verdana,Arial,sans-serif"
            });
            // Align the text in the bounding box                
            draw.align([text], bbox, "center");
            draw.vAlign([text], bbox, "center");

            var text0 = new draw.Text("0%", [bbox.origin.x, bbox.origin.y + bbox.size.height / 2 ], {
              font: "10px Verdana,Arial,sans-serif"
            });
            var text100 = new draw.Text("100%", [bbox.origin.x + bbox.size.width - 28, bbox.origin.y + bbox.size.height / 2 ], {
              font: "10px Verdana,Arial,sans-serif"
            });

             // Draw it on the Chart drawing surface
            e.sender.surface.draw(text);
            e.sender.surface.draw(text0);
            e.sender.surface.draw(text100);
        }

Upvotes: 1

Related Questions