x axis labels alignment problem

[Rahul Khinvasara]

I would like to align the XAxis labels to the right (against the bottom of the graph). Here I have some labels which are shorter in length and some very lengthy labels. I am using MaxLength property of ChartAxis Item to limit the no of characters within the label. Still I would like to align the labels which are shorter than this MaxLength to the right (i.e against the bottom of the graph). When I mention
RadChart1.Plotarea.XAxis.Appearance.Dimensions.Margins.Top= someval;
the same margin is applied to all xaxis labels. I would like this margin to be different for different chart axis items. How to achieve this functionality?

[Giuseppe]

Hi Rahul Khinvasara,

Unfortunately this customization is not possible at the moment -- we will forward your feedback to our developers so they can consider it for one of the future versions of the control.


Greetings,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[vzzak]

Hello,

I have a similar issue.  I would like to change the Aligned Position of my labels on the chart to the bottom of the graph.  I don't know whether the length of the labels is an issue since I am using times as the default label text.  But no matter what I try I am unable to move the labels.  I have tried to change both the series and the series item properties for Aligned Position, and also for  position.x and position.y, and also for offset y and offset x.  Below are the functions I am using to set the series and series item properties.  I have also turned off Auto for the positions. 

Here is the code behind in C#

SetSeriesAppearance(s0);

protected void SetSeriesAppearance(ChartSeries series)

{

series.YAxisType =

ChartYAxisType.Primary;

series.Appearance.TextAppearance.TextProperties.Font =

new Font("Tahoma", 8);

series.Appearance.TextAppearance.TextProperties.Color =

Color.Black;

series.Appearance.LabelAppearance.Position.Auto =

false;

series.Appearance.LabelAppearance.Position.AlignedPosition =

AlignedPositions.Bottom;

series.Appearance.TextAppearance.Position.AlignedPosition =

AlignedPositions.Bottom;

//series.Appearance.ShowLabelConnectors = true;

//appear to do nothing

series.Appearance.CenterXOffset = 100;

series.Appearance.CenterYOffset = 100;

}

protected void SetSeriesItemProperties(ChartSeriesItem seriesitem, int intTypeCode)

{

//seriesitem.Appearance.Border.Color = Color.Black;

//seriesitem.Label.Appearance.Border.Color = Color.Black;

seriesitem.Label.Appearance.FillStyle.MainColor =

Color.Transparent;

seriesitem.Label.Appearance.Dimensions.Paddings.Top = 2;

seriesitem.Label.Appearance.Dimensions.Paddings.Left = 0;

//appear to do nothing to labels.

//seriesitem.Label.Appearance.Dimensions.Margins.Top = 115;

//seriesitem.Label.Appearance.Dimensions.Margins.Left = 55;

seriesitem.Label.Appearance.Distance = 240;

seriesitem.Label.Appearance.LabelConnectorStyle.Visible =

true;

 

//seriesitem.Appearance.TextAppearance.TextProperties.Font = new Font("Tahoma", 8);

//seriesitem.Appearance.TextAppearance.TextProperties.Color = Color.Black;

//seriesitem.Appearance.LabelAppearance.Dimensions.Margins = new ChartMargins(5);

seriesitem.Label.Appearance.Distance = 0;

//seriesitem.Label.Appearance.Position.Auto = true;

//seriesitem.Appearance.FillStyle.FillSettings.ComplexGradient = true;

seriesitem.Label.Appearance.LabelConnectorStyle.PenStyle = System.Drawing.Drawing2D.

DashStyle.Dash;

seriesitem.Label.Appearance.LabelConnectorStyle.Color = System.Drawing.

Color.Blue;

//Absolute positioning of Labels DZ

seriesitem.Label.Appearance.Position.Auto =

false;

seriesitem.Label.Appearance.Position.X = 245;

seriesitem.Label.Appearance.Position.Y = 45;

seriesitem.Label.Appearance.Position.AlignedPosition =

AlignedPositions.BottomRight;

seriesitem.Label.Appearance.RotationAngle = 45;

// seriesitem.Label.Appearance.LabelLocation = StyleSeriesItemLabel.ItemLabelLocation.Auto;

}
Please let me know what properties are needed to achieve this and if the labels can be positioned below the bottom of the bar graph.  I am using Y axis only at this point.

[Giuseppe]

Hi vzzak,

You can change the alignment of the series item labels like this:

ASPX

<telerik:RadChart ID="RadChart1" runat="server" Width="700px" AutoLayout="True">
    <Series>
        <telerik:ChartSeries Name="Series 1" Type="Bar">
            <Items>
                <telerik:ChartSeriesItem Name="Item 1" YValue="10">
                    <Label TextBlock-Text="Text 1">
                    </Label>
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem Name="Item 2" YValue="15">
                    <Label TextBlock-Text="Text 2">
                    </Label>
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem Name="Item 3" YValue="7">
                    <Label TextBlock-Text="Text 3">
                    </Label>
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem Name="Item 4" YValue="11">
                    <Label TextBlock-Text="Text 4">
                    </Label>
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem Name="Item 1" YValue="10">
                    <Label TextBlock-Text="Text 5">
                    </Label>
                </telerik:ChartSeriesItem>
            </Items>
        </telerik:ChartSeries>
    </Series>
    <PlotArea>
        <XAxis AutoScale="False">
            <Items>
                <telerik:ChartAxisItem Value="1" TextBlock-Text="test">
                </telerik:ChartAxisItem>
                <telerik:ChartAxisItem Value="2" TextBlock-Text="test">
                </telerik:ChartAxisItem>
                <telerik:ChartAxisItem Value="3" TextBlock-Text="test">
                </telerik:ChartAxisItem>
                <telerik:ChartAxisItem Value="4" TextBlock-Text="test">
                </telerik:ChartAxisItem>
                <telerik:ChartAxisItem Value="5" TextBlock-Text="test">
                </telerik:ChartAxisItem>
            </Items>
        </XAxis>
    </PlotArea>
</telerik:RadChart>

Code-behind

RadChart1.Series[0].Appearance.LabelAppearance.LabelLocation = Telerik.Charting.Styles.StyleSeriesItemLabel.ItemLabelLocation.Inside;
RadChart1.Series[0].Appearance.LabelAppearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.BottomRight;

However, it is not possible for the series item labels to be placed under the bars. You can use the axis item labels if you would like to achieve the original appearance.

Hope this helps.


Greetings,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[vzzak]

If you have a numeric value for the series items, I would like to know if it is possible to set a text value for the Y Axis labels separate from the actual numeric value. 

I see that there is a ChartAxisItem class. If I create ChartAxisItems as in the following..

ChartAxisItem

axisItem0 = new ChartAxisItem();

Is this the correct approach, and if so do these have to be added to the Series the way the SeriesItems are?  I would like to add Axis item labels that are independent of the value but reflect the time string that I am adding from the data table. 

Thanks Again,

Damon

[Giuseppe]

Hi vzzak,

If you would like to customize the axis item labels manually, you need to set the AutoScale property of the axis to "false" and customize its MinValue / MaxValue / Step properties like this:

ASPX

<telerik:RadChart ID="RadChart1" runat="server" AutoLayout="true">
    <Series>
        <telerik:ChartSeries Name="Series 1">
            <Items>
                <telerik:ChartSeriesItem Name="Item 1" YValue="1">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem Name="Item 2" YValue="3">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem Name="Item 3" YValue="2">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem Name="Item 4" YValue="6">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem Name="Item 5" YValue="8">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem Name="Item 6" YValue="2">
                </telerik:ChartSeriesItem>
            </Items>
        </telerik:ChartSeries>
    </Series>
</telerik:RadChart>

Code-behind

protected void Page_Load(object sender, EventArgs e)
{
    RadChart1.PlotArea.YAxis.AutoScale = false;
    RadChart1.PlotArea.YAxis.MinValue = 0;
    RadChart1.PlotArea.YAxis.MaxValue = 10;
    RadChart1.PlotArea.YAxis.Step = 2;

    ChartAxisItem axisItem = new ChartAxisItem("custom1");
    axisItem.Value = 0;
    RadChart1.PlotArea.YAxis.Items.Add(axisItem);

    axisItem = new ChartAxisItem("custom2");
    axisItem.Value = 2;
    RadChart1.PlotArea.YAxis.Items.Add(axisItem);

    axisItem = new ChartAxisItem("custom3");
    axisItem.Value = 4;
    RadChart1.PlotArea.YAxis.Items.Add(axisItem);

    axisItem = new ChartAxisItem("custom4");
    axisItem.Value = 6;
    RadChart1.PlotArea.YAxis.Items.Add(axisItem);

    axisItem = new ChartAxisItem("custom5");
    axisItem.Value = 8;
    RadChart1.PlotArea.YAxis.Items.Add(axisItem);

    axisItem = new ChartAxisItem("custom6");
    axisItem.Value = 10;
    RadChart1.PlotArea.YAxis.Items.Add(axisItem);
}

All the best,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center