SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy. We also have a tag=SciChart on Stackoverflow.com where you can earn rep for your questions!

Please note: SciChart team will only answer questions from customers with active support subscriptions. Expired support questions will be ignored. If your support status shows incorrectly, contact us and we will be glad to help.

0
0

Good Morning/Afternoon,

I am trying to produce a view where the xAxis’s AxisAlignment is Left, but the scrollbar stays on the right. I am attaching an image from the application we are replacing…

It doesn’t appear that the Scrollbar has a Location or Position or WhereDoIDrawMyself property, and that the scrollbar is coupled to the Axis location. I am not sure what approach to take.

Is this even possible?

Thanks,
Mike.

Version
4.0.6.8578
Images
  • You must to post comments
0
0

It is of course possible.

Check out our documentation on WPF Chart Scrollbars. It is possible to put the scrollbar outside the axis using the second technique.

Putting a Scrollbar Outside of the SciChartSurface

The scrollbar doesn’t have to be declared on the Axis.Scrollbar property. It can be declared anywhere in your View, and simply bound to the axis via the SciChartScrollbar.Axis property. For instance:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="32"/>
    </Grid.RowDefinitions>

    <s:SciChartSurface Grid.Row="0">

        <!-- RenderableSeries omitted for brevity -->

        <s:SciChartSurface.YAxis>
            <s:NumericAxis x:Name="yAxis"/>
        </s:SciChartSurface.YAxis>

        <s:SciChartSurface.XAxis>
            <s:NumericAxis x:Name="xAxis"/>
        </s:SciChartSurface.XAxis>
    </s:SciChartSurface>

    <!-- Declare a scrollbar and bind to XAxis by ElementName binding -->
    <s:SciChartScrollbar Grid.Row="1" Margin="6,5,4,5" Axis="{Binding ElementName=xAxis}"/>

</Grid>

So, if you can figure out how to place it then you can bind it like this.

Hope this helps!

  • You must to post comments
0
0

Thanks Andrew,

Two problems arose, both of which I solved by getting a little “hacky…” Can you suggest anything better?

Problem #1 – The chart surfaces are defined in a contenttemplate that I use for a UserControl that I have providing tiling capabilities. Therefore, I couldn’t use named elements. Solution: relative binding (see below).

Problem #2 – I wanted the height of the Scrollbar to match the “plotting surface”, excluding XAxis data and scrollbars. Solution: Bind to the ModifierSurface.ActualHeight property:

 <Grid Grid.Row="0" Grid.Column="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <s:SciChartSurface Grid.Column="0" DataContext="{Binding}" s:SciChartGroup.VerticalChartGroup="aLine" >
                            <!--  snip stuff  -->

                            <!--  Create an X Axis  -->
                            <s:SciChartSurface.XAxis >
                                <chart:WindowedNumericAxis Visibility="{Binding DisplayAxisData, Converter={StaticResource PaneVisibilityConverter}}" VisibleRange="{Binding VisibleX, Mode=TwoWay, Delay=20}" MaxRange="{Binding MaxXRange}" AutoRange="Never">
                                    <chart:WindowedNumericAxis.Scrollbar>
                                        <s:SciChartScrollbar />
                                    </chart:WindowedNumericAxis.Scrollbar>
                                </chart:WindowedNumericAxis>
                            </s:SciChartSurface.XAxis>

                            <!--  Create a Y Axis  -->
                            <s:SciChartSurface.YAxis>
                                <chart:WindowedDateTimeAxis
                                                             FlipCoordinates="{Binding InvertTimeDirection}" 
                                TextFormatting="hh:mm:ss"

                                VisibleRange="{Binding VisibleY, Mode=TwoWay, Delay=20}"
                                MaxRange="{Binding MaxYRange}" 
                                AxisAlignment="Left" AutoRange="Never">

                                </chart:WindowedDateTimeAxis>
                            </s:SciChartSurface.YAxis>

                        </s:SciChartSurface>
                        <s:SciChartScrollbar Grid.Column="1" 
                                             Axis="{Binding Path=Children[0].YAxis, RelativeSource={RelativeSource AncestorType=Grid}}"
                                             Height="{Binding Path=Children[0].ModifierSurface.ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}}"
                                             VerticalAlignment="Top"/>
                    </Grid>

Thank you for the direction!

Mike.

Images
  • Andrew
    Hi Michael, I don’t think either of these methods are hacky. The alternatives are to re-write the code of scichart, or re-template the whole surface. I’d say this was a good solution!
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.