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



I recently migrated to SciChart from Telerik.
Passage more than excellent from the point of view of the architecture and, of course, of the performances.

A small note about the style of the SciChartScrollbar of an axis.

I can obtain a results similar to the attached image?
Main points are:

  • Put scrollbar between Axis and chart area
  • Styling scrollbar extremity with the little gray arrows.

Tanks very much,

  • You must to post comments

Hi Marcello

You get a +1 for porting from telerik đŸ™‚ đŸ˜‰

I had a look into this idea of putting the scrollbar above the axis. It is possible but it is not trivial, so I created an example for you over here:

This uses two charts and a separate Scrollbar to achieve the desired effect. The XAML code is here:

<Grid Background="#FAFAFA">
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    <s:SciChartSurface Grid.Row="0" x:Name="primaryChartSurface" s:ThemeManager.Theme="BrightSpark">
            <s:NumericAxis DrawLabels="False" DrawMajorTicks="False" DrawMinorTicks="False"/>

    <s:SciChartScrollbar Axis="{Binding ElementName=primaryChartSurface, Path=XAxis}" Grid.Row="1" s:ThemeManager.Theme="BrightSpark" Panel.ZIndex="99"/>

    <!-- NOTE: In order for this sample to work you need to set a valid developer license. This will hide the POWERED BY SCICHART logo which makes
                the lower chart have a minimum size.  -->
    <s:SciChartSurface Grid.Row="2" x:Name="secondaryChartSurface" Width="{Binding ElementName=primaryChartSurface, Path=RenderSurface.ActualWidth}"
            <s:HighSpeedRenderSurface Visibility="Hidden"/>
            <s:NumericAxis VisibleRange="{Binding ElementName=primaryChartSurface, Path=XAxis.VisibleRange, Mode=TwoWay}"
                           BorderThickness="0,1,0,0" BorderBrush="#AAA"/>
            <s:NumericAxis Visibility="Collapsed"/>

The result is as follows

enter image description here

Finally for styling the Scrollbar, please see our Scrollbar documentation.

Best regards

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.