Pre loader

Trouble with Aligning Two Y Axes

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

I am using SciChart v3.42.0.6778.

I’m having some trouble getting a static left and static right Y axis to have aligned grid lines and labels. I have a pan modifier for both axes. When the graph is initially drawn, the axes are aligned. If you pan an axis, it remains aligned…until you get near zero. From -1 to +1, the axis which you are panning moves. It goes either up if you’re panning up, down if you’re panning down. The graph should not move since it is static, but while panning the axis, it moves.

For example, the right Y axis displays a double range from 2.0 to 5.0. I pan the axis down. and it pans and stays aligned. However, I keep panning and get to 0, the grid lines and labels start to pan as well until I reach -1.0 and then they stop moving and are locked. If I go up, the same thing happens. If I grab the pan modifier and start wildly shaking my mouse, I get get the labels to completely move off the graph (see screenshot).

Also, if I manually set my range for either Y axis, say minimum to 2.0 and maximum to 5.0, sometimes the labels display “not nice” values of say 2.152 and 4.975 (random numbers) but the top of the chart is 5.0 and the bottom is 2.0, but the labels and tick marks aren’t at the top and bottom of the chart, there is a gap. (see attached screenshot)

In the end, I’d like the left and right axis labels, grid lines, and ticks to essentially be aligned and static where only the label names change. What am I doing wrong? Thanks!

Here is a snippet of the code defining my Y axes:

<s:SciChartSurface.YAxes>
            <s:NumericAxis Name="LeftAxis"
                           AutoRange="{Binding EnableAutoRange,
                                               Converter={StaticResource BooleanToAutoRangeConverter}}"
                           AxisAlignment="Left"
                           AxisTitle="{Binding LeftAxisTitle}"
                           CursorTextFormatting="0.000000"
                           DrawLabels="{Binding LeftAxisVisible}"
                           DrawMajorTicks="{Binding LeftAxisVisible}"
                           DrawMinorTicks="{Binding LeftAxisVisible}"
                           GrowBy="0.1,0.1"
                           Id="LeftAxis"
                           IsPrimaryAxis="True"
                           IsStaticAxis="True"
                           SnapsToDevicePixels="True"
                           TextFormatting=" 0.000;-0.000"
                           TitleStyle="{StaticResource YAxisTitleStyle}"
                           VisibleRange="{Binding YLeftVisibleRange,
                                                  Mode=TwoWay}"
                           util:AxisExtensions.DrawAxisTitle="{Binding LeftAxisVisible}">
                <s:NumericAxis.DrawMajorGridLines>
                    <MultiBinding Converter="{StaticResource BooleanAndConverter}">
                        <Binding Path="LeftAxisVisible" />
                        <Binding Path="ShowMajorGridlines" />
                    </MultiBinding>
                </s:NumericAxis.DrawMajorGridLines>
                <s:NumericAxis.DrawMinorGridLines>
                    <MultiBinding Converter="{StaticResource BooleanAndConverter}">
                        <Binding Path="LeftAxisVisible" />
                        <Binding Path="ShowMinorGridlines" />
                    </MultiBinding>
                </s:NumericAxis.DrawMinorGridLines>
                <s:NumericAxis.Style>
                    <Style TargetType="s:NumericAxis">
                        <Setter Property="behaviors:MajorGridLineColorBehavior.GridLineColor" Value="{Binding MajorGridColor}" />
                        <Setter Property="behaviors:MinorGridLineColorBehavior.GridLineColor" Value="{Binding MinorGridColor}" />
                        <Setter Property="TickTextBrush" Value="{Binding TextColor, Converter={StaticResource ColorToSolidColorBrushConverter}, FallbackValue=Black}" />
                    </Style>
                </s:NumericAxis.Style>
            </s:NumericAxis>

            <s:NumericAxis Name="RightAxis"
                           AutoRange="{Binding EnableAutoRange,
                                               Converter={StaticResource BooleanToAutoRangeConverter}}"
                           AxisAlignment="Right"
                           AxisTitle="{Binding RightAxisTitle}"
                           CursorTextFormatting="0.000000"
                           DrawLabels="{Binding RightAxisVisible}"
                           DrawMajorGridLines="False"
                           DrawMajorTicks="{Binding RightAxisVisible}"
                           DrawMinorGridLines="False"
                           DrawMinorTicks="{Binding RightAxisVisible}"
                           GrowBy="0.1,0.1"
                           Id="RightAxis"
                           IsStaticAxis="True"
                           SnapsToDevicePixels="True"
                           TextFormatting=" 0.000;-0.000"
                           TitleStyle="{StaticResource YAxisTitleStyle}"
                           VisibleRange="{Binding YRightVisibleRange,
                                                  Mode=TwoWay}"
                           util:AxisExtensions.DrawAxisTitle="{Binding RightAxisVisible}">
                <s:NumericAxis.Style>
                    <Style TargetType="s:NumericAxis">
                        <Setter Property="TickTextBrush" Value="{Binding TextColor, Converter={StaticResource ColorToSolidColorBrushConverter}, FallbackValue=Black}" />
                    </Style>
                </s:NumericAxis.Style>
            </s:NumericAxis>
        </s:SciChartSurface.YAxes>

And here are my modifiers in case that matters:

<s:SciChartSurface.ChartModifier>
            <s:ModifierGroup>
                <s:RubberBandXyZoomModifier IsAnimated="True"
                                            IsEnabled="True"
                                            IsXAxisOnly="False"
                                            RubberBandFill="#99AAAAAA"
                                            ZoomExtentsY="False" />
                <s:ZoomPanModifier ClipModeX="None"
                                   ExecuteOn="MouseMiddleButton"
                                   IsEnabled="True" />
                <s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick"
                                       IsEnabled="True"
                                       XyDirection="XDirection" />
                <s:MouseWheelZoomModifier IsEnabled="True" XyDirection="YDirection" />
                <s:YAxisDragModifier AxisId="LeftAxis" DragMode="Pan" />
                <s:YAxisDragModifier AxisId="RightAxis" DragMode="Pan" />
                <s:XAxisDragModifier ClipModeX="None" />
                <s:CursorModifier Name="CursorModifier" IsEnabled="{Binding ShowCursors, Mode=TwoWay}">
                    <s:CursorModifier.LineOverlayStyle>
                        <Style TargetType="Line">
                            <Setter Property="Stroke" Value="LightGray" />
                        </Style>
                    </s:CursorModifier.LineOverlayStyle>
                </s:CursorModifier>
                <s:LegendModifier Margin="6"
                                  GetLegendDataFor="AllSeries"
                                  LegendPlacement="Inside"
                                  Orientation="Horizontal"
                                  ShowLegend="{Binding ShowLegend}"
                                  ShowVisibilityCheckboxes="False">
                    <s:LegendModifier.LegendTemplate>
                        <ControlTemplate>
                            <s:SciChartLegend Background="{Binding ElementName=SciChartSurface,
                                                                   Path=DataContext.BackgroundColor,
                                                                   Converter={StaticResource ColorToSolidColorBrushConverter}}"
                                              Foreground="{Binding ElementName=SciChartSurface,
                                                                   Path=DataContext.TextColor,
                                                                   Converter={StaticResource ColorToSolidColorBrushConverter}}"
                                              ItemTemplate="{Binding LegendItemTemplate}"
                                              LegendData="{Binding LegendData}"
                                              Orientation="{Binding Orientation}"
                                              ScrollViewer.HorizontalScrollBarVisibility="{Binding Path=(ScrollViewer.HorizontalScrollBarVisibility)}"
                                              ScrollViewer.VerticalScrollBarVisibility="{Binding Path=(ScrollViewer.VerticalScrollBarVisibility)}"
                                              ShowSeriesMarkers="{Binding ShowSeriesMarkers}"
                                              ShowVisibilityCheckboxes="{Binding ShowVisibilityCheckboxes}" />
                        </ControlTemplate>
                    </s:LegendModifier.LegendTemplate>
                </s:LegendModifier>
            </s:ModifierGroup>
        </s:SciChartSurface.ChartModifier>
Images
  • You must to post comments
0
0

Hi Alex,

Interesting problem you have there. I was surprised about the ‘not nice numbers’ issue. SciChart is designed to choose nice human-readable numbers at all times.

Unless … you choose the AxisBase.IsStaticAxis feature.

When AxisBase.IsStaticAxis=True, SciChart fixes the number of labels at 10 on each axis and varies the label values. This is the cause of the not-nice number values on labels.

Next, aligning the axis/gridlines. The only way to do this is to have the two axis display the same VisibleRange. E.g. if you have one axis with VisibleRange 0,10 and another axis with VisibleRange 2,5, then they are going to show different gridlines and label positions. However, if they both have a VisibleRange 2,5, or, one has 2,5 and the other 3,7 (same distance) then the gridlines will be in the same place.

I guess, the question for you is – what do you want?

Do you want to fix the gridlines at a certain position? If so then you will have to vary the label values as you pan.

Do you want to fix the label values? If so, you need to vary the gridlines.

Some other links which might help you:

  1. Coarse Control over axis gridline positions: http://support.scichart.com/index.php?/Knowledgebase/Article/View/17200/30/altering-the-tick-frequency-with-autoticks

  2. Advanced control over axis gridline positions:
    http://support.scichart.com/index.php?/Knowledgebase/Article/View/17201/30/advanced-tick-frequency-overriding

Best regards,
Andrew

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies