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
Hello GlennPiper ,
I’ve created a case on your behalf with number: CAS-69619-J06F6S.
We’ll continue communication trough there.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://ko.infragistics.com/support
What about this bug its been a year now and its not fixed !!!
All,
Thank you for your replies, and for creating the case. That being said, I have pulled the Infragistics Charts out of my project and will be using the ones released by Microsoft instead. They seem to work better.
This decision was due 3 things: 1) The issue with the labels defined in this forum, 2) That the 3D Pie charts have inadequate collision detection for labels when located outside of the chart (I know the 2D has better collision detection, but the customer required a 3D chart), and 3) all of the Infragistics charts are saved as physical files on the server, requiring me to create a special folder with special permissions, and having an unknown clean-up mechanism (although I admit to not researching it in the documentation). The MS ones can be created entirely in memory, sent out via an HTTP Handler that requires no manual setup, and are (by default) deleted right after being served.
Thank you again for your prompt replies.Glenn