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

Pie chart at 100% cuts off sides of chart

6 Answers 217 Views

Chart (Obsolete)

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

John asked on 15 Sep 2011, 06:26 AM

pie.jpg

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

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

Accepted

answered on 24 Sep 2011, 04:08 PM

result.PNG

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

answered on 16 Jan 2012, 08:15 PM

chart.jpg

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)

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.