Version

Configuring Axis Crossing

In the XamDataChart™ control, you can use the CategoryXAxis object’s CrossingAxis and CrossingValue properties to change where the XAxis crosses the YAxis. The CrossingAxis property must be bound to the NumericYAxis using the ElementName attribute and the CrossingValue must be set to the value at which you want the XAxis to cross YAxis. The following can be applied to the NumericYAxis object’s CrossingAxis and CrossingValue properties to change where the YAxis crosses the XAxis.

The following code example shows how to set axis crossing values for CategoryXAxis and NumericYAxis in the Data Chart control.

In XAML:

<ig:CategoryXAxis x:Name="xAxis"
                  StrokeThickness="5"
                  Stroke="Red"
                  CrossingValue="20"
                  LabelLocation="InsideBottom"
                  CrossingAxis="{x:Reference yAxis}"
                  ItemsSource="{StaticResource DataSource}"
                  Label="Label">
</ig:CategoryXAxis>
<ig:NumericYAxis x:Name="yAxis"
                 StrokeThickness="5"
                 Stroke="Green"
                 CrossingValue="100"
                 LabelLocation="InsideLeft"
                 CrossingAxis="{x:Reference xAxis}">
</ig:NumericYAxis>

In C#:

var yAxis = new NumericYAxis()
{
    StrokeThickness = 5,
    Stroke = new SolidColorBrush(Color.Green),
    CrossingValue = 100,
    LabelLocation = AxisLabelsLocation.InsideLeft
};
var xAxis = new CategoryXAxis()
{
    StrokeThickness = 5,
    Stroke = new SolidColorBrush(Color.Red),
    ItemsSource = data,
    Label = "Label",
    CrossingValue = 20,
    LabelLocation = AxisLabelsLocation.InsideBottom
};
xAxis.CrossingAxis = yAxis;
yAxis.CrossingAxis = xAxis;

The following image shows how the XamDataChart control might look with the axis crossing values set for CategoryXAxis and NumericYAxis.

xamDataChart Axis Crossing 01.png

Related Content: