This is a migrated thread and some comments may be shown as answers.

Pie chart at 100% cuts off sides of chart

6 Answers 172 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 15 Sep 2011, 06:26 AM
I am wanting to create pie chart with no title, label, legend, etc that takes up the full size of the chart.

However, when I set DiameterScale to 1 (100%) a small amount of the right and bottom sides of the chart is lost, making it no longer look perfectly circular. (Attached are some examples)

I did try and fix this with xoffset and yoffset but the smallest movement was too much.

Is there any way to make a pie chart take up the full size of the chart without losing any pixels?

6 Answers, 1 is accepted

Sort by
0
Evgenia
Telerik team
answered on 19 Sep 2011, 03:56 PM
Hello John,

The CenterXOffset and CenterYOffset properties control the location of the pie chart in the plot area. You can manually change their values to have a fully readable chart. On the other hand you can increase the plot area size by reducing the margins between the chart and the plot area itself thus it will "extend" to hold the whole image. You may find more information about the margins in this help topic.

All the best,
Evgenia
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal
0
John
Top achievements
Rank 1
answered on 21 Sep 2011, 01:54 AM
Do you have an example of a pie chart where the pie takes up 100% of the specified size without any titles, labels, legends, etc, where the pie is not cut off on any sides? From my experiments I could not do this, even with margins and offsets. Thank you.
0
Accepted
Evgenia
Telerik team
answered on 24 Sep 2011, 04:08 PM
Hi John,

The following code displays the Pie as expected on my side - the Pie takes 100% of the available space in the PlotArea:
<telerik:RadChart ID="RadChart1" runat="server" DefaultType="Pie">
            <Series>
                <telerik:ChartSeries Name="Series 1" Type="Pie">
<Appearance DiameterScale="1"></Appearance>
                    <Items>
                        <telerik:ChartSeriesItem Name="Item 1" YValue="10">
                        </telerik:ChartSeriesItem>
                        <telerik:ChartSeriesItem Name="Item 2" YValue="50">
                        </telerik:ChartSeriesItem>
                        <telerik:ChartSeriesItem Name="Item 3" YValue="20">
                        </telerik:ChartSeriesItem>
                    </Items>
                </telerik:ChartSeries>
            </Series>
            <Legend Visible="False">
                <Appearance Visible="False">
                </Appearance>
            </Legend>
            <PlotArea>
                <Appearance Dimensions-Margins="0px, 0px, 0px, 0px">
                </Appearance>
            </PlotArea>
            <ChartTitle Visible="False">
                <Appearance Visible="False">
                </Appearance>
            </ChartTitle>
        </telerik:RadChart>

Note that I extended the PlotArea to fill the whole ChartArea since you don't want the Title and the Legend visible. The image attached shows the result.

Greetings, Evgenia
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
Vijaianand
Top achievements
Rank 1
answered on 16 Jan 2012, 08:15 PM
I was looking for similar things and able to implement your suggestion but I am not getting the exact circle pie. As the other person was saying, my bottom and side of the pie are showing flattened out. Attached the image.

Dim chart As New RadChart
           chart.Height = 150
           chart.Width = 150
           chart.PlotArea.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid
           chart.PlotArea.Appearance.FillStyle.MainColor = Drawing.Color.Transparent
           chart.PlotArea.Appearance.Border.Visible = False
           chart.ChartTitle.Visible = False
           chart.Legend.Visible = False
           chart.PlotArea.Appearance.Dimensions.Margins = "0 0 0 0"
           chart.Appearance.Border.Visible = False
           Dim series As New Telerik.Charting.ChartSeries
           series.Type = Telerik.Charting.ChartSeriesType.Pie
           series.AddItem(Convert.ToInt32(sklcnt) - Convert.ToInt32(empSklCnt))
           series.AddItem(Convert.ToInt32(empSklCnt))
           series.Appearance.DiameterScale = 1
           chart.AddChartSeries(series)
0
John
Top achievements
Rank 1
answered on 16 Jan 2012, 11:00 PM
It's been a long time since I was working on this, but I did resolve the issue. Here is my code for a 100x100px chart that seems to

<telerik:RadChart ID="Chart" runat="server" DefaultType="Pie" ChartTitle-Visible="false" Height="100px" Width="100px">
                                        <Appearance Border-Visible="false">
                                            <FillStyle MainColor="Transparent"></FillStyle>
                                        </Appearance>
                                        <Legend Visible="False">
                                            <Appearance Visible="False"></Appearance>
                                        </Legend>
                                        <PlotArea Appearance-Dimensions-Margins="0" Appearance-Border-Visible="false">
                                            <Appearance>
                                                <FillStyle MainColor="Transparent" FillType="Solid"></FillStyle>
                                                <Border Width="0" Visible="False"></Border>
                                            </Appearance>
                                        </PlotArea>
                                        <ChartTitle Visible="False">
                                            <Appearance Visible="False"></Appearance>
                                        </ChartTitle>
                                    </telerik:RadChart>

And here's some of the code from the code-behind which could be part of the solution:

Telerik.Charting.ChartSeries series = new Telerik.Charting.ChartSeries();
                    series.Type = Telerik.Charting.ChartSeriesType.Pie;
                    series.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
                    series.Appearance.ShowLabels = false;
                    series.Appearance.DiameterScale = 0.99;
                    for (int i = 1; i <= 3; i++)
                    {
                        Telerik.Charting.ChartSeriesItem item = new Telerik.Charting.ChartSeriesItem();
                        item.YValue = i;
                        item.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
                        switch (i)
                        {
                            case 1:
                                item.Appearance.FillStyle.MainColor = System.Drawing.Color.Green;
                                item.YValue = (double)campaign.Opened;
                                break;
                            case 2:
                                item.Appearance.FillStyle.MainColor = System.Drawing.Color.Red;
                                item.YValue = (double)campaign.Failed;
                                break;
                            default: //case 3:
                                item.Appearance.FillStyle.MainColor = System.Drawing.Color.Blue;
                                item.YValue = (double)campaign.Subscribers - (double)campaign.Opened - (double)campaign.Failed;
                                break;
                        }
                        item.Appearance.Border.Visible = false;
                        series.AddItem(item);

Hope this may help you.
0
Vijaianand
Top achievements
Rank 1
answered on 18 Jan 2012, 02:54 PM
Thanks. That helps.
Tags
Chart (Obsolete)
Asked by
John
Top achievements
Rank 1
Answers by
Evgenia
Telerik team
John
Top achievements
Rank 1
Vijaianand
Top achievements
Rank 1
Share this question
or