How to customize the scrollbar in sfchart?

[Tomas Raziel Garza Amaya]

Hi, i have some charts about important things, the default is too big and want something slim.

Thanks for help

[Samuel Rajadurai Edwin Rajamanickam]

Hi Tomas,

Thanks for contacting Syncfusion Support.

Scroll bar style can be changed by setting the EnableTouchMode property as “true” in the chart axis as like the below code example.
 

  

Code Example: 

[XAML] 

<chart:SfChart.PrimaryAxis> 

     <chart:NumericalAxis EnableScrollBar="True" EnableTouchMode="True" /> 

</chart:SfChart.PrimaryAxis> 

 

Regards,
Samuel 

[Tomas Raziel Garza Amaya]

There any way to make the buttons are smaller? I mean this buttons:

[Samuel Rajadurai Edwin Rajamanickam]

Hi Tomas,

The size of the thumbs can be changed by overriding the styles of both the axis and scroll bar. We have prepared a demo sample for your requirement.

Please find the sample from the link below.
Column


Regards,
Samuel

[Tomas Raziel Garza Amaya]

It's works, thanks.

[Samuel Rajadurai Edwin Rajamanickam]

Hi Tomas,

We are glad that your requirement has been met.

Please let us know if you have any queries.

Regards,
Samuel

[Tim Raymond]

This solution works OK.  It would be nice to adjust the non-touch SfChartResizeable bar.  The issue I have with the stock or the revised bar presented here is that it overlaps the bottom of the chart axis, obscuring points and lines that lie along the x-axis (at 0, for example).  Is there a "best practice" way to put a small gap between the SfChartResizeable bar and the axis?  For now, I've simply put a margin around SfChartResizeableBar in the xAxisStyle Style.  

My goal is something that looks more like a traditional scrollbar.  For now, I settle for the stock no-touch bar if it wasn't so out of proportion in thickness with the chart size.  Attached are two examples of the same plots.  One with Syncfusion and one with a competitor, Telerik.

Attachment: Chart_Examples_64abf407.zip

[Devi Aruna Maharasi Murugan]

Hi Tomas, 

  

Thanks for your update. 

  

We have analyzed your requirement, customizing margin of the re-sizable scroll bar in chart axis style is the best way to avoid re-sizable scroll bar merging with the chart area border.  

  

Regards, 

Devi Aruna M 

[Tim Raymond]

Is there any way to adjust the height of the existing non-touch scrollbar?  The Telerik chart (see my screenshots previously attached) has a scrollbar that looks reasonable.  Syncfusions is way out of proportion for these plots.

[Samuel Rajadurai Edwin Rajamanickam]

Hi Tim, 

  

Thanks for the update. 

  

We have achieved the requirement  by applying style for custom ResizableScrollBar and axis. We can adjust the size of scrollbar by setting “Height” value in ResizableScrollBar as shown in the below code snippet. 

  

Code Snippet: 

[XAML] 

                                        

<local:CustomResizableScrollBar EnableTouchMode="False"  Margin="0,5,0,5"                

                                x:Name="sfchartResizableBar" Height="10"  

                                Style="{StaticResource sfDesktopStyle1}"> 

</local:CustomResizableScrollBar> 

 

  

Please find the modified sample from the link below. 

Sample link: Column_Scroll_Size 

  

Regards, 

Samuel 

  

[Pavol Majchrak]

Hi, I try edit this example for customize scrollbar. I can not find where is change the scrollbar when the mouse is on this scrollbar.

On the first picture mouse is not on the scrollbar and on the second picture mouse is on the scrollbar and scrollbar is automatically  wider and I don't able to find event where is change doing.

[Muneesh Kumar G]

Hi Tim,   

 

We have analyzed your query and we suspect that you have not set Style for secondary axis. So that the customized scrollbar template has not applied to the axis scrollbar. So please make sure that the Style for axis applied as per the below code snippet.  

 

Code snippet [XAML]: 

<chart:SfChart.PrimaryAxis> 

                <chart:NumericalAxis EnableScrollBar="True" Style="{StaticResource axis}" 

                                     EnableTouchMode="True"  /> 

            </chart:SfChart.PrimaryAxis> 

 

 

You can customize the scrollbar height by adjusting rectangle height as per the below code snippet.  

 

Code snippet [XAML]: 

..    

<ControlTemplate x:Key="HorizontalThumbTemplate" TargetType="Thumb"> 

                                        <Grid x:Name="Root" Height="10" Background="Transparent"> 

                                            <Rectangle Height="1" x:Name="Background" Fill="Black"> 

                                            </Rectangle> 

                                        </Grid> 

                                    </ControlTemplate> 

.. 

 

 

Also, we have modified our sample for touch mode, please find the sample from the following location.  

 

Sample : http://www.syncfusion.com/downloads/support/forum/124036/ze/Sample1795814314 

 

Please let us know if you have any queries.   

    

Regards,   

Muneesh Kumar G.  

 

 

 

  

 

[Pavol Majchrak]

Hi,

Can I change only color of our default scrollbar ?  I want to a little lighter. Thanks for your answer.

[Muneesh Kumar G]

Hi Tim,   

 

You can achieve this requirement by applying theme for chart using SfSkinManager as per the below code snippet.  

 

Code snippet [C#]: 

Syncfusion.SfSkinManager.SfSkinManager.SetVisualStyle(FastColumn, 

                Syncfusion.SfSkinManager.VisualStyles.Lime); 

 

We have modified our sample based on this, please find the sample from the following location.  

 

Sample : http://www.syncfusion.com/downloads/support/forum/124036/ze/Sample1449874131 

 

Please refer below sample to know available theme in SfSkinManager.  

 

C:\Users\<UserName>\AppData\Local\Syncfusion\EssentialStudio\<Version>\WPF\SfChart.WPF\Samples\Visual Styles\VisualStyles 

 

Please let us know if you have any queries.  

 

Thanks, 

Muneesh Kumar G.