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

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.

SciChart WPF v6 BETA released! Note pricing/licensing changes are coming. Contact us to beat the rise!Read more
+