Axis labels uneven

[John]

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.

[Peshito]

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

[John]

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.

[Peshito]

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

[John]

It helped a great deal.  There is still a pixel or so of waver in the right justification.

[Peshito]

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