Y-Axis values jumbled up on RadChart with ScaleBreaks

Thread is closed for posting
2 posts, 0 answers
  1. AJ
    AJ avatar
    33 posts
    Member since:
    Jun 2011

    Posted 16 Mar 2012 Link to this post

    I'm not sure what I'm doing wrong and even though it's rather small issue, it's an annoying one. I'm sure it's an easy fix, but I can't figure it out.

    Basically, on my RadChart I'm using scale breaks and where the break actually occurs the numbers on the y-axis get jumbled up/overlap each other, making it difficult to read.

    Here's the code on the aspx page:
    <telerik:RadChart ID="rcTotalCaseTypes" AutoLayout="true" runat="Server" Width="900px"
               Skin="Telerik" Style="margin: 0px auto;" IntelligentLabelsEnabled="True">
               <Legend Visible="true">
                   <Appearance GroupNameFormat="#VALUE">
                   </Appearance>
               </Legend>
               <ChartTitle TextBlock-Text="Total Cases by Category">
                   <TextBlock>
                       <Appearance TextProperties-Font="Verdana, 20px, style=Bold" TextProperties-Color="#00529B">
                       </Appearance>
                   </TextBlock>
               </ChartTitle>
               <PlotArea>
                   <Appearance Dimensions-Margins="18%, 22%, 12%, 14%">
                   </Appearance>
                   <XAxis DataLabelsColumn="PrettyMonthYr">
                       <Appearance>
                           <TextAppearance TextProperties-Font="Verdana, 8pt, style=Bold">
                           </TextAppearance>
                       </Appearance>
                   </XAxis>
                   <YAxis LabelStep="5" ScaleBreaks-Enabled="true" AutoScale="False">
                       <Appearance ValueFormat="None">
                           <TextAppearance TextProperties-Font="Verdana, 8pt, style=Bold">
                           </TextAppearance>
                           <MajorGridLines Width="3" PenStyle="Dash" />
                           <MinorGridLines Visible="false" />
                       </Appearance>
                   </YAxis>
               </PlotArea>
           </telerik:RadChart>

    On the code behind (this code is executed on Page_Init):
    var data = SPs.RptNumberOfCasesByType(locationID).ExecuteTypedList<InvoiceCategoryNumbers>();
    ChartMonths = new List<DateTime>();
     
    var primaryKnee = new ChartSeries
    {
        Name = "PK Cases",
        Type = ChartSeriesType.Bar,
        YAxisType = ChartYAxisType.Primary
    };
     
    var revisionKnee = new ChartSeries
    {
        Name = "RK Cases",
        Type = ChartSeriesType.Bar,
        YAxisType = ChartYAxisType.Primary
    };
     
    var hipCases = new ChartSeries
    {
        Name = "Hip Cases",
        Type = ChartSeriesType.Bar,
        YAxisType = ChartYAxisType.Primary
    };
     
    var rxCases = new ChartSeries
    {
        Name = "Rx Cases",
        Type = ChartSeriesType.Bar,
        YAxisType = ChartYAxisType.Primary
    };
     
    var otherCases = new ChartSeries
    {
        Name = "Other Cases",
        Type = ChartSeriesType.Bar,
        YAxisType = ChartYAxisType.Primary
    };
     
     
    data.ForEach(c =>
                    {
                        ChartMonths.Add(Convert.ToDateTime(c.YearMo + "-01"));
     
                        var barTooltip = string.Format("<b>{0}</b><br /># of Cases: {1}<br />Total Sales: {2:C}", c.Category, c.NumInvoices, c.TotalSold);
                        var barSeriesItem = new ChartSeriesItem(Convert.ToDouble(c.NumInvoices), c.Category) { Name = c.Category };
                        barSeriesItem.Label.Visible = false;
                        barSeriesItem.Label.ActiveRegion.Tooltip = barTooltip;
                        barSeriesItem.ActiveRegion.Tooltip = barTooltip;
     
     
                        switch (c.InvoiceCategoryID)
                        {
                            case -1:
                                otherCases.AddItem(barSeriesItem);
                                break;
                            case 1:
                                primaryKnee.AddItem(barSeriesItem);
                                break;
                            case 2:
                                revisionKnee.AddItem(barSeriesItem);
                                break;
                            case 3:
                                hipCases.AddItem(barSeriesItem);
                                break;
                            case 11:
                                rxCases.AddItem(barSeriesItem);
                                break;
                        }
                    });
    rcTotalCaseTypes.Series.Add(primaryKnee);
    rcTotalCaseTypes.Series.Add(revisionKnee);
    rcTotalCaseTypes.Series.Add(hipCases);
    rcTotalCaseTypes.Series.Add(rxCases);
    rcTotalCaseTypes.Series.Add(otherCases);
    rcTotalCaseTypes.DataBind();
     
    rcTotalCaseTypes.PlotArea.XAxis.Clear();
    if (ChartMonths.Count > 0)
    {
        var uniqueMonths = new HashSet<DateTime>(ChartMonths);
        uniqueMonths.ToList().ForEach(m => rcTotalCaseTypes.PlotArea.XAxis.AddItem(m.ToString("MM/yyyy")));
    }
     
    rcTotalCaseTypes.PlotArea.YAxis.ScaleBreaks.Segments.Add(new AxisSegment() { MinValue = 0, MaxValue = 150, Step = 10 });
    rcTotalCaseTypes.PlotArea.YAxis.ScaleBreaks.Segments.Add(new AxisSegment() { MinValue = 151, MaxValue = 500, Step = 10 });

    I'd prefer not to have to manually create segments, but if I have to I will. 

    Thank you for your help!
  2. Peshito
    Admin
    Peshito avatar
    496 posts

    Posted 21 Mar 2012 Link to this post

    Hello,

    I tried to reproduce your issue following a scenario similar to yours and I could not. The labels overlapping most probably appears because of the values your series items have. Try changing your first scale break's MaxValue and your second scale break's MinValue. You might also have to change the Step value of your second scale break in order to better display the labels.

    I have attached a sample that you could refer to for more information. If the above approach does not help, could you try to reproduce your issue using the attached example, as it is not clear from your code provided what data have you used for your series.

    All the best,
    Peshito
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top