Pie chart at 100% cuts off sides of chart

Thread is closed for posting
7 posts, 1 answers
  1. John
    John avatar
    31 posts
    Member since:
    May 2011

    Posted 15 Sep 2011 Link to this post

    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?
  2. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 19 Sep 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    31 posts
    Member since:
    May 2011

    Posted 20 Sep 2011 Link to this post

    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.
  5. Answer
    Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 24 Sep 2011 Link to this post

    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
  6. Vijaianand
    Vijaianand avatar
    82 posts
    Member since:
    Jul 2012

    Posted 16 Jan 2012 Link to this post

    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)
  7. John
    John avatar
    31 posts
    Member since:
    May 2011

    Posted 16 Jan 2012 Link to this post

    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.
  8. Vijaianand
    Vijaianand avatar
    82 posts
    Member since:
    Jul 2012

    Posted 18 Jan 2012 Link to this post

    Thanks. That helps.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017