Hi,
I have to create a special donut chart like below image by using Telerik designer, is it possible? And another question, how to design chart legend look like this picture, separate category into 2 sections?
I really appreciate any answers, thanks for helping us.
1 Answer, 1 is accepted
Hello,
Thank you for the provided screenshot!
The design from the image looks like a Pie chart nested into a doughnut chart. This is not supported out of the box, however, a similar outlook can be achieved by creating 2 separate graphs and having them overlap one another.
For details on how to create such graphs, please refer to the Pie Charts Overview - Telerik Reporting article.
Regarding the legend, in order to achieve this legend with two separate titles, you will need to insert a list/table report item to list the data of the nested graph and to display the legend mark via a textbox whose Style.BackgroundColor property is set via a binding. This would require you to have the colors as part of the data source or a separate data source just for that, I have used this approach in the attached sample report.
Please have a look at the attached report and let me know if that satisfies your needs.
Regards,
Dimitar
Progress Telerik
Rank 1
Iron
Hi Dimitar,
Thank for your answer.
I have a concern, each chart connect to a datasource, in case this is a restAPI, if we overlap charts, I mean we will insert 2 different charts, will it call an API twice?
Thanks.
Yes, currently, each data item DataSource is treated on its own, i.e. although Graph1 and the Graph2 use the same data source, for each of them the data will be fetched independently.
With that being said, we were actually able to prepare a report that uses a single graph to display the two pie series as in your screenshot. The main problem that we faced initially was with producing a second graph legend. But after further tests today, we were able to achieve a similar look with a single graph and I have attached a sample report to my reply.
We used the approach from the Create a Graph Report Item with Column and Line Series - Telerik Reporting KB article to generate the second pie series and for the double legend, you may check the expressions used in each graph series' LegendItem.Value property. Essentially, it is still just a single graph legend but with custom logic to change its styling to appear as if there is more than one.
Rank 1
Iron
Thanks, really appreciate your help.
We have consulted your answer/example and have our solution.
Again, thank you Dimitar, have a nice day.
Rank 1
Iron
I also have another question.
Can you see below picture. I already have 2 charts, donut. you can see, the second one is bigger than first one. Actually, the second chart is copied from the first with data has been changed. I just don't know why it happen? how to keep 2 charts same size wite each other? is it a bug or I missed something else?
The inner chart of the graph is sized depending on the size of the graph item which includes the legend that is rendered inside of it. For example, a bigger legend would leave less space for the inner chart and it would make it smaller.
With that being said, the legends appear to be similar so are the two graph items of the same size?
When it comes to the doughnut graph, the inner size would also be affected by the PolarCoordinateSystem.InnerRadiusRatio value so checks if it is the same on both graphs.
If you need further assistance, please send us your report with the latest changes so that we may also have a look. I would appreciate it if sample data could also be sent in that case so that we can preview the report locally.