SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & 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.

1
0

Hello,

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,
marc.

Version
5.2.0.11680
Images
  • You must to post comments
0
0

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:

https://github.com/ABTSoftware/SciChart.WPF.Examples/tree/master/v5.x/Sandbox/UsefulExamples/Examples/ScrollbarAboveAxis

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

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

    <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:ThemeManager.Theme="BrightSpark"                            
                       Margin="0,-10,0,0"
                       HorizontalAlignment="Left">
        <s:SciChartSurface.RenderSurface>
            <s:HighSpeedRenderSurface Visibility="Hidden"/>
        </s:SciChartSurface.RenderSurface>
        <s:SciChartSurface.XAxis>
            <s:NumericAxis VisibleRange="{Binding ElementName=primaryChartSurface, Path=XAxis.VisibleRange, Mode=TwoWay}"
                           BorderThickness="0,1,0,0" BorderBrush="#AAA"/>
        </s:SciChartSurface.XAxis>
        <s:SciChartSurface.YAxis>
            <s:NumericAxis Visibility="Collapsed"/>
        </s:SciChartSurface.YAxis>
    </s:SciChartSurface>
</Grid>

The result is as follows

enter image description here

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

Best regards
Andrew

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.