Hello,
I'm using the Pie Chart but instead of showing the absolute values in the label, i wanted to show the series name in the label to not need a legend and keep my interface clean. This I could do easily by setting the clienttemplate of the labels. However, after rendering the labels are not displayed proper. They are clipped (see attachments).
It seems that the width of the svg element is actually larger then the width of the containing div that is generated despite them both being the width I set for the control (300px).
Is there anyway to make these labels fit in the container so they are not clipped?
I have limited width on my page because I show more pie charts in a row.
Thanks
I'm using the Pie Chart but instead of showing the absolute values in the label, i wanted to show the series name in the label to not need a legend and keep my interface clean. This I could do easily by setting the clienttemplate of the labels. However, after rendering the labels are not displayed proper. They are clipped (see attachments).
It seems that the width of the svg element is actually larger then the width of the containing div that is generated despite them both being the width I set for the control (300px).
Is there anyway to make these labels fit in the container so they are not clipped?
I have limited width on my page because I show more pie charts in a row.
Thanks
5 Answers, 1 is accepted
0
Hello Ramaka,,
Thank you for contacting the Telerik support.
The width property of the RadHtmlChart specifies the width of the rendered container, so specifying a small value might cause certain visual glitches when label's text is very long. A good way to handle the scenario is to increase the width of the RadHtmlChart, so longer labels will fit in the displayed PlotArea. However, as you have limited space on the page and if you could not use a smaller value for the Chart's width, another solution is to shorten the names of the series, which will shorten the text of the labels as well.
Another way to handle the unexpected behavior is to take advantage of the LabelsAppearance's Margin property and set negative values, which will move the labels towards the chart itself. This should give you some additional space. For more information, you could have a look at our help article about styling Labels and Titles and check the section for the Margin property. You should also be aware of the fact that line breaking is not supported in SVG and as the labels are rendered as SVG elements, putting line breaks among the text of the labels will not fix the issue.
Regards,
Stamo Gochev
the Telerik team
Thank you for contacting the Telerik support.
The width property of the RadHtmlChart specifies the width of the rendered container, so specifying a small value might cause certain visual glitches when label's text is very long. A good way to handle the scenario is to increase the width of the RadHtmlChart, so longer labels will fit in the displayed PlotArea. However, as you have limited space on the page and if you could not use a smaller value for the Chart's width, another solution is to shorten the names of the series, which will shorten the text of the labels as well.
Another way to handle the unexpected behavior is to take advantage of the LabelsAppearance's Margin property and set negative values, which will move the labels towards the chart itself. This should give you some additional space. For more information, you could have a look at our help article about styling Labels and Titles and check the section for the Margin property. You should also be aware of the fact that line breaking is not supported in SVG and as the labels are rendered as SVG elements, putting line breaks among the text of the labels will not fix the issue.
Regards,
Stamo Gochev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
RBeco
Top achievements
Rank 1
Rank 1
answered on 24 Apr 2013, 03:47 PM
Hello,
Thanks for the response. Unfortunately your suggestions do not give me the desired effect. Setting the padding makes the labels overlap with the line and also changes the padding of the labels on the left side of the pie (which rendered perfectly fine).
Also, to make matters more complex, the requirement is that the different pie charts on our dashboard have the same diameter to get a consistent and easy-on-the-eye look. That makes solutions with a legend not feasible either cause the legend will 'scale' the pie to make it all fit.
Is there perhaps a possibility to not just set the width of the whole control, but also set the diameter of the pie? I would rather have the legend scaled smaller than the pie itself and be sure in advance they will all look the same.
Thanks!
Thanks for the response. Unfortunately your suggestions do not give me the desired effect. Setting the padding makes the labels overlap with the line and also changes the padding of the labels on the left side of the pie (which rendered perfectly fine).
Also, to make matters more complex, the requirement is that the different pie charts on our dashboard have the same diameter to get a consistent and easy-on-the-eye look. That makes solutions with a legend not feasible either cause the legend will 'scale' the pie to make it all fit.
Is there perhaps a possibility to not just set the width of the whole control, but also set the diameter of the pie? I would rather have the legend scaled smaller than the pie itself and be sure in advance they will all look the same.
Thanks!
0
Hi Ramaka,
Your answer states you tried setting the Padding property, but my suggestion was to use the Margin property of the LabelsAppearance. Did you actually meant the Margin property or you have tried the Padding instead? You can also try setting smaller FontSize for the labels through the TextStyle property of the labels.
Regarding your question about setting the diameter of the pie chart - the only way to control the size of the RadHtmlChart is to use the Width and Height properties. The actual chart is rendered according to this dimensions (taking into account other elements such as the labels, the legend, etc., not just the actual chart itself), so that all elements should fit in it. Currently, there is no way to set the size of only the pie chart that appears in the PlotArea, but setting the same dimensions (Width and Height) for all the charts in your dashboard would make them appear as having the same diameter. Could try this approach and inform me if this is applicable in your case?
Another approach could be to use a the legend as a place to populate the items names, instead of using the labels. You can fine tune the legend through its position and background properties or through the TextStyle property (e.g. FontSize, FontFamily, Color, etc.). You can also consider implementing a custom legend that is common for all of your charts. This can be a styled div/span element that is aligned on the dashboard. There is an example with KendoUI's BubbleChart that shows how to create such a custom legend.
All the best,
Stamo Gochev
the Telerik team
Your answer states you tried setting the Padding property, but my suggestion was to use the Margin property of the LabelsAppearance. Did you actually meant the Margin property or you have tried the Padding instead? You can also try setting smaller FontSize for the labels through the TextStyle property of the labels.
Regarding your question about setting the diameter of the pie chart - the only way to control the size of the RadHtmlChart is to use the Width and Height properties. The actual chart is rendered according to this dimensions (taking into account other elements such as the labels, the legend, etc., not just the actual chart itself), so that all elements should fit in it. Currently, there is no way to set the size of only the pie chart that appears in the PlotArea, but setting the same dimensions (Width and Height) for all the charts in your dashboard would make them appear as having the same diameter. Could try this approach and inform me if this is applicable in your case?
Another approach could be to use a the legend as a place to populate the items names, instead of using the labels. You can fine tune the legend through its position and background properties or through the TextStyle property (e.g. FontSize, FontFamily, Color, etc.). You can also consider implementing a custom legend that is common for all of your charts. This can be a styled div/span element that is aligned on the dashboard. There is an example with KendoUI's BubbleChart that shows how to create such a custom legend.
All the best,
Stamo Gochev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
RBeco
Top achievements
Rank 1
Rank 1
answered on 13 May 2013, 02:47 PM
I have tried a few of your suggestions and looked into your explanations but as of yet I still cant get the pie charts to display on a page in a consistent matter.
I have tried both the padding as the margin settings but both will make the labels overlap with the lines and doesnt solve the clipping problem.
I now use a legend instead of the labels but that produces another issue with the size of the pie (the diameter I mentioned in my previous post).
"(Width and Height) for all the charts in your dashboard would make them appear as having the same diameter. Could try this approach and inform me if this is applicable in your case?"
I tried. It didnt work. The diameters were different. The problem is that different charts will have different legends and this also determines the size of the pie. So a chart with a large legend will have a smaller pie diameter than one with a small legend.
I thought to be smart and size the charts in such a way that there would be always enough room vertically to display the legend causing the width of the chart to the determine the diameter. That worked in some way, the diameter seems to be the same....but the pies in the chart do not align to the top of the chart. In the attached image you can see an example.
The problem here is that the pie seems to align in the center of the chartarea (or else has not a consistent top margin). Again with a larger legend, the pie will render differently (in this case it will have a smaller top margin).
If the labels cannot be fixed and the pie diameter cannot be set, can it be an option to set the alignment of the pie to top? I just really need to have these charts display properly on a page and have a more predictable look to them.
Thanks
I have tried both the padding as the margin settings but both will make the labels overlap with the lines and doesnt solve the clipping problem.
I now use a legend instead of the labels but that produces another issue with the size of the pie (the diameter I mentioned in my previous post).
"(Width and Height) for all the charts in your dashboard would make them appear as having the same diameter. Could try this approach and inform me if this is applicable in your case?"
I tried. It didnt work. The diameters were different. The problem is that different charts will have different legends and this also determines the size of the pie. So a chart with a large legend will have a smaller pie diameter than one with a small legend.
I thought to be smart and size the charts in such a way that there would be always enough room vertically to display the legend causing the width of the chart to the determine the diameter. That worked in some way, the diameter seems to be the same....but the pies in the chart do not align to the top of the chart. In the attached image you can see an example.
The problem here is that the pie seems to align in the center of the chartarea (or else has not a consistent top margin). Again with a larger legend, the pie will render differently (in this case it will have a smaller top margin).
If the labels cannot be fixed and the pie diameter cannot be set, can it be an option to set the alignment of the pie to top? I just really need to have these charts display properly on a page and have a more predictable look to them.
Thanks
0
Hi Ramaka,
When the PieChart has a larger legend aligned on the top or the bottom of the Pie, the chart's plotarea as well as the pie inside it resizes, so that they fit in with the dimensions of the chart. This is expected behavior and you can reproduce it with a pie series in excel table.
What I can suggest you is to align the chart's legend either on the left or the right side of the pie. In case when many series items are present on the pie, the legend will simply be cut.
I hope that helps.
Greetings,
Danail Vasilev
the Telerik team
When the PieChart has a larger legend aligned on the top or the bottom of the Pie, the chart's plotarea as well as the pie inside it resizes, so that they fit in with the dimensions of the chart. This is expected behavior and you can reproduce it with a pie series in excel table.
What I can suggest you is to align the chart's legend either on the left or the right side of the pie. In case when many series items are present on the pie, the legend will simply be cut.
I hope that helps.
Greetings,
Danail Vasilev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.