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


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?


  • You must to post comments

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:

        <RowDefinition Height="*"/>
        <RowDefinition Height="32"/>

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

        <!-- RenderableSeries omitted for brevity -->

            <s:NumericAxis x:Name="yAxis"/>

            <s:NumericAxis x:Name="xAxis"/>

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


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

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">
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto" />
                        <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">
                                        <s:SciChartScrollbar />

                            <!--  Create a Y Axis  -->
                                                             FlipCoordinates="{Binding InvertTimeDirection}" 

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


                        <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}}"

Thank you for the direction!


  • Andrew Burnett-Thompson
    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.