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?
5 Answers, 1 is accepted
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
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.
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
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
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