Thank you for your suggestions, but the solution will not work for me.

I'll look into other alternatives.

Its hard to match up to the category axis for the stepareachart because it gets offset labeled (where the label appears in the middle of the step).
To get the numeric axis to match up to the category axis, subtract half the interval between two points on your category axis from the minimum value
and add half the interval between the two points to the maximum value.
In this case, the numbers on the category axis run from 0 to 140 with a 20 interval. So the range of the numeric x axis is set to:
Min = (0 - (20 / 2)) = -10
Max = (140 + (20 / 2)) = 150
Note that this will only work if your category series data items are equidistant (the interval is constant).

Here's the xaml:

<Grid x:Name="LayoutRoot" Background="White">
        <igChart:XamDataChart x:Name="theChart" 
                              VerticalZoomable="True" 
                              HorizontalZoomable="True" 
                              VerticalZoombarVisibility="Visible" 
                              HorizontalZoombarVisibility="Visible">
            <igChart:XamDataChart.Axes>
                <igChart:NumericYAxis x:Name="yAxis" MinimumValue="0" MaximumValue="100"/>
                <igChart:NumericXAxis x:Name="xAxis" MinimumValue="-10" MaximumValue="150">
                    <igChart:NumericXAxis.LabelSettings>
                        <igChart:AxisLabelSettings Visibility="Collapsed" />
                    </igChart:NumericXAxis.LabelSettings>
                </igChart:NumericXAxis>
                <igChart:CategoryXAxis x:Name="catAxis" Label="{}{Label}" ItemsSource="{StaticResource stepData}" />
            </igChart:XamDataChart.Axes>
            <igChart:XamDataChart.Series>
                <igChart:ScatterLineSeries
                    XAxis="{Binding ElementName=xAxis}"
                    YAxis="{Binding ElementName=yAxis}"
                    ItemsSource="{StaticResource line1}"
                    MarkerType="None"
                    Thickness="3"
                    Brush="Blue"
                    XMemberPath="XValue"
                    YMemberPath="YValue"/>
                <igChart:StepAreaSeries 
                    XAxis="{Binding ElementName=catAxis}"
                    YAxis="{Binding ElementName=yAxis}"
                    x:Name="stepSeries" 
                    ItemsSource="{StaticResource stepData}"
                    ValueMemberPath="Value"/>
            </igChart:XamDataChart.Series>
        </igChart:XamDataChart>
    </Grid>

And code behind:

public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

    public class Line1Data
        : ObservableCollection<LineDataItem>
    {
        public Line1Data()
        {
            Add(new LineDataItem()
                {
                    XValue = 100,
                    YValue = 0
                });

            Add(new LineDataItem()
            {
                XValue = 100,
                YValue = 100
            });
        }
    }

    public class LineDataItem
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
    }

    public class StepDataItem
    {
        public string Label { get; set; }
        public double Value { get; set; }
    }

    public class StepData
        : ObservableCollection<StepDataItem>
    {
        public StepData()
        {
            Add(new StepDataItem()
                {
                    Label = "0",
                    Value = 10
                });
            Add(new StepDataItem()
            {
                Label = "20",
                Value = 20
            });
            Add(new StepDataItem()
            {
                Label = "40",
                Value = 30
            });
            Add(new StepDataItem()
            {
                Label = "60",
                Value = 40
            });
            Add(new StepDataItem()
            {
                Label = "80",
                Value = 50
            });
            Add(new StepDataItem()
            {
                Label = "100",
                Value = 60
            });
            Add(new StepDataItem()
            {
                Label = "120",
                Value = 70
            });
            Add(new StepDataItem()
            {
                Label = "140",
                Value = 80
            });
        }
    }

Does this help?

-Graham

Any idea on this?

Yes, I am trying to overlay some dividers using scatter line series, so the issue will be with aligning category x-axis and numerical x-axis as you say.

I can emulate a steplineseries that takes true numeric x-data by adapting the scatter line series, but is there a way to emulate the step area series? i.e. fill the area between the x-axis and my line with a specific colour?