Donut chart with curved series name

Progress® Kendo UI® for jQuery Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 14 Dec 2020 13:07 by ADMIN

Jay

Created on: 08 Dec 2020 19:37

Category: Chart

Type: Feature Request

Donut chart with curved series name

I am wondering if it is possible to provide circular series labels with the donut chart, similar to the image I've attached. Ideally, I'd like the 2011-15 Average and 1995-99 Average text ot both be on the top of the series.

Attached Files:

donutlabel.jpg

4 comments

ADMIN

Alex Hajigeorgieva

Posted on: 14 Dec 2020 13:07

Hi, Jay,

I have now moved this thread port to the Feedback portals.

Indeed, DOM manipulation over SVG elements is not a great approach, and I would not recommend it, unless it is absolutely unavoidable. Unfortunately, there is nothing more reasonable that can be done instead.

To achieve curved text, the Kendo Drawing API needs to implement:

rendering the necessary <textPath> element with a href attribute which can be nested in a <text> element
the ability to pass an id to path elements

As for the chart events:

render - for charts with data inline the series

dataBound - for charts bound to a dataSource

Once the feature request gains enough popularity, it will be moved in the planning and added to the official functionality.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Jay

Posted on: 10 Dec 2020 20:06

Hi Alex. While I can create the Text and Arc, it appears they are rendered without an ID or class, which makes it rather difficult to select them in order to do DOM manipulation with them. I'd rather not rely on their placement in the rendered code, as that seems a bit brittle. Would you have any suggestions around this?

Also, is there some kind of post-render event where I could do the DOM manipulation, or where/when would you suggest this occur?

Thanks.

Jay

Posted on: 10 Dec 2020 18:05

Hi Alex. Thanks for the references. I had actually started down that path myself, but it's good to know that's the right approach.

I think it would be nice to have this more directly available, so please do log it as a feature request.

ADMIN

Alex Hajigeorgieva

Posted on: 10 Dec 2020 15:35

Hi, Jay,

You can achieve a similar result as shown in the screenshot with the Kendo Donut chart by:

setting the series.labels.position to "center"
introducing an additional series for the empty circle

https://dojo.telerik.com/@bubblemaster/axIBajoz

However, to curve the label text, you will require a custom visual. On one hand, you will need the Text element and on the other, you will need t draw an Arc or a Path with the curveTo() method.

However, currently the Text and Arc would be rendered as separate elements, so the only way to connect the Arc path with the Text so it curves would be with DOM manipulation.

Here is an article that shows the expected SVG structure so that the text can be curved:

https://css-tricks.com/snippets/svg/curved-text-along-path/

Let me know in case you would like me to log this as a feature request.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik