Hi. I have a Stacked Bar Chart where I want the X Axis SeriesLabels to be drawn at an angle. When I set the Orientation to Custom, and the OrientationAngle, the labels are indeed being angled, however, they rotate around the center of the label, not the top as I would expect. This means that it is VERY difficult to tell what label is for what column. I have tried setting the HorizontalAlign value to Near or Far, but the designer keeps resetting it to Center.
Attached is a picture of what is happening, and the markup used. Any assistance with how to fix the labels will be greatly appreciated.
<div class="ConditionChart">
<igchart:UltraChart ID="ucCondition" runat="server" BackgroundImageFileName="" ChartType="StackColumnChart"
EmptyChartText="Data Not Available."
Height="400px" Version="10.3" Width="550px">
<Border Thickness="0" />
<Effects>
<igchartprop:GradientEffect Enabled="False">
</igchartprop:GradientEffect>
</Effects>
<TitleTop Font="Segoe UI, 18pt, style=Bold" HorizontalAlign="Center"
Text="Condition" ClipText="False">
</TitleTop>
<TitleBottom Visible="False">
</TitleBottom>
<ColorModel ModelStyle="CustomSkin" ColorBegin="Pink" ColorEnd="DarkRed"
AlphaLevel="150">
<Skin ApplyRowWise="False">
<PEs>
<igchartprop:PaintElement Fill="DarkGreen" />
<igchartprop:PaintElement Fill="LightGreen" />
<igchartprop:PaintElement Fill="Yellow" />
<igchartprop:PaintElement Fill="Red" />
</PEs>
</Skin>
</ColorModel>
<Axis>
<PE ElementType="None" Fill="Cornsilk"></PE>
<X Visible="True" LineThickness="1" TickmarkStyle="Smart" TickmarkInterval="0"
Extent="92">
<MajorGridLines Visible="True" DrawStyle="Dot" Color="Gainsboro" Thickness="1" AlphaLevel="255">
</MajorGridLines>
<MinorGridLines Visible="False" DrawStyle="Dot" Color="LightGray" Thickness="1" AlphaLevel="255">
</MinorGridLines>
<Labels ItemFormatString="<ITEM_LABEL>" Font="Verdana, 7pt"
FontColor="DimGray" HorizontalAlign="Near"
VerticalAlign="Center" Orientation="Custom" OrientationAngle="40">
<SeriesLabels Font="Verdana, 7pt" FontColor="DimGray" HorizontalAlign="Center"
VerticalAlign="Near" Orientation="Custom" OrientationAngle="40">
<Layout Behavior="Auto">
</Layout>
</SeriesLabels>
</Labels>
</X>
<Y Visible="True" LineThickness="1" TickmarkStyle="Smart"
TickmarkInterval="200" Extent="43">
<Labels ItemFormatString="<DATA_VALUE:00.##>" Font="Verdana, 7pt" FontColor="DimGray"
HorizontalAlign="Far" VerticalAlign="Center" Orientation="Horizontal">
<SeriesLabels FormatString="" Font="Verdana, 7pt" FontColor="DimGray" HorizontalAlign="Far"
VerticalAlign="Center" Orientation="Horizontal">
</Y>
<Y2 Visible="False" LineThickness="1" TickmarkStyle="Smart"
TickmarkInterval="200">
<Labels ItemFormatString="<DATA_VALUE:00.##>" Visible="False" Font="Verdana, 7pt"
FontColor="Gray" HorizontalAlign="Near" VerticalAlign="Center" Orientation="Horizontal">
<SeriesLabels FormatString="" Font="Verdana, 7pt" FontColor="Gray" HorizontalAlign="Near"
</Y2>
<X2 Visible="False" LineThickness="1" TickmarkStyle="Smart" TickmarkInterval="0">
<Labels ItemFormatString="<ITEM_LABEL>" Visible="False" Font="Verdana, 7pt"
FontColor="Gray" HorizontalAlign="Far" VerticalAlign="Center" Orientation="VerticalLeftFacing">
<SeriesLabels Font="Verdana, 7pt" FontColor="Gray" HorizontalAlign="Far"
VerticalAlign="Center" Orientation="VerticalLeftFacing">
</X2>
<Z Visible="False" LineThickness="1" TickmarkStyle="Smart" TickmarkInterval="0">
<Labels ItemFormatString="<ITEM_LABEL>" Font="Verdana, 7pt" FontColor="DimGray"
HorizontalAlign="Near" VerticalAlign="Center" Orientation="Horizontal">
<SeriesLabels Font="Verdana, 7pt" FontColor="DimGray" HorizontalAlign="Near" VerticalAlign="Center"
Orientation="Horizontal">
</Z>
<Z2 Visible="False" LineThickness="1" TickmarkStyle="Smart" TickmarkInterval="0">
<SeriesLabels Font="Verdana, 7pt" FontColor="Gray" HorizontalAlign="Near" VerticalAlign="Center"
</Z2>
</Axis>
<Tooltips Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
Font-Underline="False" />
</igchart:UltraChart>
</div>
Hi,
You can change the alignments from the property grid “OrienationAngle” property. See the attached image.
Teodor,
Thank you for your reply. I have just tried changing the setting in that property screen. I am able to set the setting to HorizontalAlign="Far" using the alignment icons, and then I click the OK button to save and close the popup. At that point, I can see that the HorizontalAlign property in the main settings screen is then set to Far, but only for a moment. Within a second or to, it reverts back to HorizontalAlign=Center.
It is getting a bit maddening... :P
Do you have any other thoughts? Does the HorizontalAlign value have any constraints? I.E. - Is there another setting whose value may be forcing the HorizontalAlign to be set to center?
Thanks,Glenn