Axis labels uneven

Thread is closed for posting
6 posts, 0 answers
  1. John
    John avatar
    44 posts
    Member since:
    Apr 2011

    Posted 04 Mar 2012 Link to this post

    I have a radchart that is a horizontal bar chart (so the X-Axis and Y-Axis are reversed).  The X-Axis (the vertical one in this case) has custom labels that are supposed to be right justified.  However, the right justification is only approximate.  It looks as if the strings with wider characters end further to the right than strings that have on average narrower characters.  The appearance seems as if the code that builds the bitmap uses a formula based on string length * font n-space rather than string.measure string to calculate the starting location of each label in this particular case.
  2. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 06 Mar 2012 Link to this post

    Hi John,

    I tried to reproduce your issue and I could not. I have also prepared and attached a sample demonstrating that the labels are properly aligned. Could you please take a look at it and modify it in the way the issue is reproducible, so we could better investigate what is causing it and give you the most appropriate solution.

    Regards,
    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
  4. John
    John avatar
    44 posts
    Member since:
    Apr 2011

    Posted 06 Mar 2012 Link to this post

    I modified the aspx so the problem is more visible by reducing the height of the chart.

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeFile="Default.aspx.cs" Inherits="Default" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="telerik" %>
     
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <telerik:RadChart ID="radChart" runat="server" Width="600px" Height="120px">
           <PlotArea>
               <EmptySeriesMessage Visible="True">
                   <Appearance Visible="True">
                   </Appearance>
               </EmptySeriesMessage>
           </PlotArea>
    </telerik:RadChart>
    </asp:Content>

    The key is the font used.  We have selected the Verdana font for all parts of our UI.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Charting;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ChartSeries series1 = new ChartSeries();
     
            if (!IsPostBack)
            {
                List<ChartData> data = new List<ChartData>();
                data.Add(new ChartData() { Text = "iiiiiiiiiiiiii 1", Value = 20, Value2 = 30 });
                data.Add(new ChartData() { Text = "WWWWWWWWWWWWWW 1", Value = 40, Value2 = 50 });
                data.Add(new ChartData() { Text = "a sample text here MBGH ff", Value = 60, Value2 = 70 });
     
                series1.Type = ChartSeriesType.Bar;
                series1.DataYColumn = "Value";
                series1.Name = "Series1";
     
                radChart.Series.Add(series1);
                radChart.AutoLayout = true;
                radChart.SeriesOrientation = ChartSeriesOrientation.Horizontal;
                radChart.Legend.Visible = false;
                radChart.PlotArea.XAxis.DataLabelsColumn = "Text";
                radChart.PlotArea.XAxis.Appearance.LabelAppearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Right;
     
                System.Drawing.Font f = new System.Drawing.Font("Verdana", 10, System.Drawing.FontStyle.Regular);
     
                radChart.Legend.Appearance.ItemTextAppearance.TextProperties.Font = f;
                radChart.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Font = f;
                radChart.PlotArea.YAxis.Appearance.TextAppearance.TextProperties.Font = f;
                radChart.PlotArea.YAxis2.Appearance.TextAppearance.TextProperties.Font = f;
                radChart.PlotArea.EmptySeriesMessage.TextBlock.Appearance.TextProperties.Font = f;
     
     
                for (int i = 0; i < radChart.Series.Count; ++i)
                    for (int j = 0; j < radChart.Series[i].Items.Count; ++j)
                        radChart.Series[i].Items[j].Label.TextBlock.Appearance.TextProperties.Font = f;
     
     
                radChart.DataSource = data;
                radChart.DataBind();
            }
        }
     
        public class ChartData
        {
            public string Text
            {
                get;
                set;
            }
     
            public double? Value
            {
                get;
                set;
            }
     
            public double? Value2
            {
                get;
                set;
            }
     
            public double? FromDate
            {
                get;
                set;
            }
     
        }
    }

    The uneven right justification should now be visible.
  5. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 07 Mar 2012 Link to this post

    Hi John,

    Thank you for writing back.

    May I suggest you to try the following approach. Set both LabelApperance and TextAppearance alignments to Right.
    radChart.PlotArea.XAxis.Appearance.LabelAppearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Right;
    radChart.PlotArea.XAxis.Appearance.TextAppearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Right;

    Please, give it a try and let us know if this approach does not work for you or in case any other questions arise.


    Kind regards,
    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.
  6. John
    John avatar
    44 posts
    Member since:
    Apr 2011

    Posted 08 Mar 2012 Link to this post

    It helped a great deal.  There is still a pixel or so of waver in the right justification.
  7. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 09 Mar 2012 Link to this post

    Hello John,

    Our RadChart uses Graphics.MeasureString method that is designed for use with individual strings and includes a small amount of extra space before and after the string to allow for overhanging glyphs. Also, the DrawingStrings method adjusts glyph points to optimize display quality and might display a string narrower than reported by MeasureString. I believe this is causing the observed pixel discrepancy and unfortunately I cannot suggest you a better solution at this point. Nevertheless, I have forwarded your feedback to our developers for further review so they can consider possible options for addressing this glitch in the future.

    Please excuse us for any inconvenience caused. Should you have any more questions, please do let me know.

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