Forums Ultimate UI for WPF
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Sam
3160
How to format x axis label with negative angle
posted

http://ko.infragistics.com/help/topic/3749cb6a-9858-447a-8fd2-80db85c7aca1
I need to present labels under data values in my chart as shown in the above link.
I would like to accomplish this:
1.) Set the angle of the label to minus 15 (-15)
2.) Display a label under every value
3.) Position the label such that the entire label is visible to the viewer and not overlaid on top of the chart (see above link).
For example if the value of the label is "My label" the "M" must not be outside the margin of the chart and the "l" must not be over the chart area.
My chart displays only 20 values and the labels are timestamp strings i.e "11:21:56"

Thank you!

Here is xaml:

<

ig:XamDataChart Name="xamDataChart1" Width

="600" >

<ig:XamDataChart.Axes

>

<ig:NumericYAxis

MinimumValue="0"

IsLogarithmic

="False"

x:Name

="YAxis" >

</ig:NumericYAxis

>

　

<ig:CategoryXAxis

x:Name="XAxis"

ItemsSource="{Binding Load

}"

Label

="{}{Label}">

<ig:CategoryXAxis.LabelSettings

>

<ig:AxisLabelSettings Angle="-15" FontSize="9" Extent="100" HorizontalAlignment="Left" Location="OutsideBottom"></ig:AxisLabelSettings

>

</ig:CategoryXAxis.LabelSettings

>

</ig:CategoryXAxis

>

</ig:XamDataChart.Axes

>

<ig:XamDataChart.Series

>

<ig:ColumnSeries ItemsSource="{Binding Load

}"

ValueMemberPath="Value"

XAxis="{Binding ElementName

=XAxis}"

YAxis="{Binding ElementName

=YAxis}">

</ig:ColumnSeries

>

　

</ig:XamDataChart.Series

>

</ig:XamDataChart

>

 

Parents
  • 138253
    Offline posted

    Hello,

    Thank you for your post. I have been looking into it and I can suggest you set the CategoryXAxis like this:

    <ig:CategoryXAxis x:Name="XAxis" Interval="1" ItemsSource="{Binding Load}">
    <ig:CategoryXAxis.LabelSettings>
        <ig:AxisLabelSettings Extent="50" Location="OutsideBottom" FontSize="9" HorizontalAlignment="Left"/>
    </ig:CategoryXAxis.LabelSettings>
    <ig:CategoryXAxis.Label>
        <DataTemplate>
            <TextBlock Text="{Binding Item.Label}">
                <TextBlock.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="-15" />
                            <TranslateTransform  Y="30"></TranslateTransform>
                        </TransformGroup>
                </TextBlock.RenderTransform>
            </TextBlock>
        </DataTemplate>
    </ig:CategoryXAxis.Label>
</ig:CategoryXAxis>

    in order to achiev the functionality you want.

    Hope this helps you.

Reply Children