Multiple Axes

SciChart supports unlimited XAxes on the top/bottom of the chart and unlimited YAxes on the left/right of the chart. When more than one X or Y Axes is required, an alternative properties, SciChartSurface.YAxes and SciChartSurface.XAxes must be used instead of SciChartSurface.XAxis and SciChartSurface.YAxis.

NOTE: Please note that it is required to apply a unique string ID to every axis in the same collection if there are multiple XAxes or YAxes. There is the Axis.Id property for this.

To configure the Alignment of an Axis, simply set the AxisAlignment property on the Axis:

            <!--  Create an X Axis  -->
            <s:SciChartSurface.XAxes>
                <s:DateTimeAxis AxisAlignment="Bottom"
                                AxisTitle="Bottom Axis"
                                BorderBrush="#FFFF1919"
                                BorderThickness="0,1,0,0"
                                Id="BottomAxisId"
                                TickTextBrush="#FFFF1919" />
                <s:DateTimeAxis AxisAlignment="Top"
                                AxisTitle="Top Axis"
                                BorderBrush="#FF279B27"
                                BorderThickness="0,0,0,1"
                                Id="TopAxisId"
                                TickTextBrush="#FF279B27" />
            </s:SciChartSurface.XAxes>
 
            <!--  Create Y Axes on the Left and Right. -->
            <s:SciChartSurface.YAxes>
                <s:NumericAxis AxisAlignment="Left"
                               AxisTitle="Left Axis"
                               BorderBrush="#FFFC9C29"
                               BorderThickness="0,0,1,0"
                               DrawMajorBands="True"
                               GrowBy="0.05, 0.05"
                               Id="LeftAxisId"
                               TextFormatting="#.0"
                               TickTextBrush="#FFFC9C29" />
                <s:NumericAxis AxisAlignment="Right"
                               AxisTitle="Right Axis"
                               BorderBrush="#FF4083B7"
                               BorderThickness="1,0,0,0"
                               GrowBy="0.05, 0.05"
                               Id="RightAxisId"
                               TextFormatting="#.0"
                               TickTextBrush="#FF4083B7" />
            </s:SciChartSurface.YAxes>

The resulting chart should look very similar to the one below:

The example can be found in SciChart Examples Suite at Modify Axis Behavior -> Multiple XAxis. The full source code of the example can be found online at this link.

Rotating a Chart (Vertical Oriented Chart)

Also it is possible create a Vertical Chart, which means having XAxes on the left / right and top / bottom of a chart (rotated chart). For this, simply set AxisAlignment on XAxes to Left or Right, and to Top or Bottom on YAxes. SciChart takes care of the rest:

<!-- Declare a chart with two YAxis at the top.  -->
<!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
<s:SciChartSurface Name="sciChartLeft" Grid.Column="0" Margin="0 0 10 0" s:HorizontalGroupHelper.HorizontalChartGroup="MyHorizontalGroup">

       <!--  Define the XAxis for this chart on the Left -->
       <s:SciChartSurface.XAxis>
             <s:NumericAxis AxisAlignment="Left" AxisTitle="X-Axis" DrawMajorBands="True"/>
       </s:SciChartSurface.XAxis>

       <!-- Define multiple YAxis on the top -->
       <s:SciChartSurface.YAxes>
             <s:NumericAxis AxisAlignment="Top" AxisTitle="Gray Line"
                            BorderBrush="DarkGray" BorderThickness="0,0,0,1"
                                     Id="Top1" TickTextBrush="DarkGray"/>
             <s:NumericAxis AxisAlignment="Top" AxisTitle="Brown Line"
                            BorderBrush="Brown" BorderThickness="0,0,0,1"
                                     Id="Top2" TickTextBrush="Brown"/>
       </s:SciChartSurface.YAxes>

</s:SciChartSurface>

The resulting chart should look very similar to the one below:

The example can be found in SciChart Examples Suite at Modify Axis Behavior -> Vertical Charts. The full source code of the example can be found online at this link.

Further Reading

SciChart provides other capabilities to layout a chart also. For further information on please see the following documentation articles:

• Axis Alignment - Setting Axis Alignment
• Axis Alignment - Rotating a Chart Vertically
• Axis Alignment - Placing Axis Central in the Chart
• Axis Styling - Templating the Axis Panel

There are also several examples in SciChart Examples Suite that demo axis layout possibilities:

• Multiple XAxis
• Multiple YAxis
• Seconday YAxis
• Vertical Charts
• Vertically Stacked YAxes
• Polar Chart With Multiple Axis