Knowledgebase: Axis Fundamentals
Creating a Chart with Multiple X and Y Axes
Posted by Admin - on 21 March 2014 11:19 AM

Creating a Chart with Multiple X and Y Axes

When more than one X or Y Axes is required, an alternative property, AxisBase.YAxes / XAxes must be used. To define a chart with multiple X and Y Axes, please use the following syntax. Combinations may be used, e.g. use the YAxes property to define 2 or more YAxes, but XAxis property to define a single, shared XAxis.

C#

var scs = new SciChartSurface();
var yAxisLeft = new NumericAxis() {AxisAlignment = AxisAlignment.Left};
var yAxisRight = new NumericAxis() {AxisAlignment = AxisAlignment.Right};
var xAxisBottom = new DateTimeAxis() {AxisAlignment = AxisAlignment.Bottom};
var xAxisTop = new DateTimeAxis() {AxisAlignment = AxisAlignment.Top};
scs.XAxes.Add(xAxisBottom);
scs.XAxes.Add(xAxisTop);
scs.YAxes.Add(yAxisLeft);
scs.YAxes.Add(yAxisRight);

XAML

<!-- Define the SciChartSurface, using a theme from the predefined list -->
<s:SciChartSurface x:Name="sciChartSurface" 
                    s:ThemeManager.Theme="Chrome">
            
    <s:SciChartSurface.RenderableSeries>
        <!-- Omitted for Brevity  -->
    </s:SciChartSurface.RenderableSeries>

    <!-- Defines the XAxes -->
    <s:SciChartSurface.XAxes>
        <s:DateTimeAxis AxisAlignment="Bottom"/>
        <s:DateTimeAxis AxisAlignment="Top"/>
    </s:SciChartSurface.XAxes>

    <!-- Defines the YAxes  -->
    <s:SciChartSurface.YAxes>
        <s:NumericAxis AxisAlignment="Left"/>
        <s:NumericAxis AxisAlignment="Right"/>
    </s:SciChartSurface.YAxes>

</s:SciChartSurface>

The resulting chart might look as on the screenshot below:

(4 vote(s))
Helpful
Not helpful

CONTACT US

Not sure where to start? Contact us, we are happy to help!


CONTACT US

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725