Pie Labels - Connectors Crossing Each Other

Thread is closed for posting
5 posts, 0 answers
  1. Justavian
    Justavian avatar
    23 posts
    Member since:
    Aug 2010

    Posted 20 Sep 2012 Link to this post

    I'm working on a pie chart that is close to working as expected - just not quite.  My problems revolve around the labels - something that a lot of people seem to struggle with.  In my case, it's the connectors.

    I have three images attached, showing the same data with a few different settings for the pie:

    DefaultPie is basically what i want to see, and i haven't tweaked the rotations or scales very much.  Note how the connectors are overlapping at the top.  Why are some of the labels being placed out of order?  This would be totally fine, provided that the top five items weren't in a bizarre order.

    The other two images are the same data with rotations and scales applied to try to improve the display.  To no avail.  In all cases, the connectors end up crossing.  In the best case scenario, i might have one bizarrely placed label, and in the worst case, there might be five or six of them placed willy nilly.

    What might i do here to fix this?

    Here's the code i'm using for my chart (minus the individual series items, which i'm not making any appearance changes to):
    this.Chart.DefaultType = ChartSeriesType.Pie;
    this.Chart.IntelligentLabelsEnabled = true;
    this.Chart.ChartTitle.Visible = false;
    this.Chart.Legend.Visible = false;
    this.Chart.PlotArea.Appearance.Dimensions.Margins = new Telerik.Charting.Styles.ChartMargins(0, 0, 0, 0);
     
    ChartSeries seriesPrimary = new ChartSeries();
        seriesPrimary.Type = ChartSeriesType.Pie;
        seriesPrimary.Appearance.ShowLabelConnectors = true;
        seriesPrimary.Appearance.LabelAppearance.LabelConnectorStyle.Color = System.Drawing.Color.White;
                     
    this.Chart.Series.Add(seriesPrimary);

  2. Justavian
    Justavian avatar
    23 posts
    Member since:
    Aug 2010

    Posted 22 Sep 2012 Link to this post

    Is there some additional info i can provide to help arrive at a possible solution for this?  Perhaps i need to provide a full project, simplified down to just show the problem i'm experiencing?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 25 Sep 2012 Link to this post

    Hello Justavian,

    Indeed, the labels positioning has some flaws and I am afraid you have hit them with this scenario. 

    As a workaround I would suggest playing with increasing the distance between the pie and the labels (chart1.Series[i].Appearance.LabelAppearance.Distance property) and theStartAngle property.
    Another thing you can try is using the default labels showing only the values and a legend, where the long text will reside.

    Regards
    Petar Kirov
    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.
  5. Justavian
    Justavian avatar
    23 posts
    Member since:
    Aug 2010

    Posted 25 Sep 2012 Link to this post

    I was hoping that perhaps i could place the labels myself, and they would automatically attach their connectors.  But when i try to change the position of one of the labels manually, it just ignores it.

    I'm actually finding much better results when i turn off the "IntelligentLabelsEnabled".  If the chart is large enough, there is only a slight overlap of the labels themselves, but otherwise the format is great.  If i could just tweak the placement slightly, i think it would be perfect. 

    So - there's my next question.  Is it possible to have connectors on, but place the label manually?  If there's no way of doing so, i may have to resort to a pie chart engine from scratch, which i'd prefer to avoid.  However, i believe i can do a better job of placing labels, given a few assumptions about my charts.  I tried to do something like this:

    csi.Label.Appearance.Position.X = 100;
    csi.Label.Appearance.Position.Y = 100;

    Where csi is a ChartSeriesItem, but the position of the labels is unchanged.  This is with the AutoLayout = false, and IntelligentLabelsEnabled = false as well.

    Thanks for your help.

    -RP
  6. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 28 Sep 2012 Link to this post

    Hello Justavian,

    Unfortunately it is not possible to manually position the series items labels.

    However since Q2 2012 we added the RadHtmlChart to our ASP.NET AJAX suite. It is an ASP.NET control wrapper around the Kendo UI Chart. 

    Kendo UI is a HTML5, jQuery-based framework for building modern HTML apps. Kendo UI combines the best of emerging HTML5, CSS3, and JavaScript technologies with robust, cross-browser techniques to deliver a framework that is both powerfully rich and broadly compatible with older browsers. 

    I did try it in you scenario and I've attached the result that I got. I sincerely hope that our new HTMLChart will suit your needs.

    Regards,

    Petar Kirov
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017