We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to customize the scrollbar in sfchart?

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

Thanks for help

13 Replies

SR Samuel Rajadurai Edwin Rajamanickam Syncfusion Team May 11, 2016 01:25 PM UTC

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 



TR Tomas Raziel Garza Amaya May 11, 2016 02:27 PM UTC

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




SR Samuel Rajadurai Edwin Rajamanickam Syncfusion Team May 12, 2016 01:41 PM UTC

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


TR Tomas Raziel Garza Amaya May 12, 2016 05:21 PM UTC

It's works, thanks.


SR Samuel Rajadurai Edwin Rajamanickam Syncfusion Team May 13, 2016 04:46 AM UTC

Hi Tomas,

We are glad that your requirement has been met.

Please let us know if you have any queries.

Regards,
Samuel


TR Tim Raymond May 23, 2016 12:45 PM UTC

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


DA Devi Aruna Maharasi Murugan Syncfusion Team May 24, 2016 11:11 AM UTC

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 



TR Tim Raymond May 24, 2016 02:54 PM UTC

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.


SR Samuel Rajadurai Edwin Rajamanickam Syncfusion Team May 26, 2016 10:46 AM UTC

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 
  



PM Pavol Majchrak June 19, 2018 10:33 AM UTC

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.






MK Muneesh Kumar G Syncfusion Team June 20, 2018 11:28 AM UTC

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.  
 
 
Please let us know if you have any queries.   
    
Regards,   
Muneesh Kumar G.  
 
 
 
  
 



PM Pavol Majchrak June 21, 2018 02:04 PM UTC

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




MK Muneesh Kumar G Syncfusion Team June 22, 2018 04:17 AM UTC

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


Loader.
Up arrow icon