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
100
NumericXAxis Crossing Value Tick Marks
posted

How do I get the tick marks to display below the x axis at the crossing value?

Assuming I have a y axis with it's minimum value to something like -200, the tickmarks are showing at the bottom of the chart. If I set the Location of the axis label to InsideBottom the tickmarks will show on the x axis, but I need the labels to be below the axis, not above.

Basically, I need the top chart in this image to stay how it is with the labels below the x axis, but the bottom chart needs to have it's tickmarks also on the x axis.

Heres the XAML for the XAxis, both graphs in the picture above share this code.

<ig:NumericXAxis x:Name="NumericXAxis"
                           Interval="{Binding XInterval, RelativeSource={RelativeSource AncestorType={x:Type ig:XamDataChart}}}"
                           MinimumValue="0"
                           MaximumValue="{Binding MaximumXValue, RelativeSource={RelativeSource AncestorType={x:Type ig:XamDataChart}}}"
                           Label="{Binding XLabel, RelativeSource={RelativeSource AncestorType={x:Type ig:XamDataChart}}}"
                           MajorStrokeThickness="0"
                           TickLength="4"
                           TickStrokeThickness="2"
                           TickStroke="{Binding ChartColor, RelativeSource={RelativeSource AncestorType={x:Type ig:XamDataChart}}}"
                           CrossingAxis="{Binding ElementName=NumericYAxis}"
                           CrossingValue="0">
    <ig:NumericXAxis.Resources>
        <local:BindingProxy x:Key="proxy"
                                      Data="{Binding RelativeSource={RelativeSource AncestorType={x:Type ig:XamDataChart}}}" />
    </ig:NumericXAxis.Resources>
    <ig:NumericXAxis.LabelSettings>
        <ig:AxisLabelSettings Location="OutsideBottom" Foreground="{Binding Data.ChartColor, Source={StaticResource proxy}}"/>
    </ig:NumericXAxis.LabelSettings>
</ig:NumericXAxis>

  • 435
    Verified Answer
    posted

    Hi,

      What you're looking for cannot currently be done w/ a single axis.  However there is a simple solution that should provide you with the look you're describing.

    <ig:CategoryXAxis x:Name="XAxisWTicks" ItemsSource="{StaticResource data}" Label="{}{Country}">

        <ig:CategoryXAxis.LabelSettings>

            <ig:AxisLabelSettings Location="InsideBottom" Foreground="Transparent" />

        </ig:CategoryXAxis.LabelSettings>

    </ig:CategoryXAxis>

    <ig:CategoryXAxis x:Name="XAxisWLabels" TickLength="0" ItemsSource="{StaticResource data}" Label="{}{Country}" />

    Basically what we are doing here is showing two xAxis.  One has the ticks in the proper position and the labels transparent and the other axis has the labels with no tick mark length.  If you'd still like to do this with a single axis, then I'd recommend creating a user voice request to add this as a new feature!

    Thanks a lot,

    Rich