Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Chart > Pie chart at 100% cuts off sides of chart

• John

  Posted on Sep 15, 2011 (permalink)

  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?
  

  Attached files

  • pie.jpg

  Reply

• Evgenia Evgenia

  Posted on Sep 19, 2011 (permalink)

  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

  Reply


• John

  Posted on Sep 20, 2011 (permalink)

  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.

  Reply

• Answer Evgenia Evgenia

  Posted on Sep 24, 2011 (permalink)

  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

  Attached files

  • result.PNG

  Reply

• VIJAIANAND Intermediate

  Posted on Jan 16, 2012 (permalink)

  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)

  Attached files

  • chart.jpg

  Reply

• John

  Posted on Jan 16, 2012 (permalink)

  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.

  Reply

• VIJAIANAND Intermediate

  Posted on Jan 18, 2012 (permalink)

  Thanks. That helps.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Chart > Pie chart at 100% cuts off sides of chart