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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the scrollbar in sfchart?

Thread ID:

Created:

Updated:

Platform:

Replies:

124036 May 10,2016 09:54 PM UTC Jun 22,2018 04:17 AM UTC WPF 13
loading
Tags: SfChart
Tomas Raziel Garza Amaya
Asked On May 10, 2016 09:54 PM UTC

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

Thanks for help

Samuel Rajadurai Edwin Rajamanickam [Syncfusion]
Replied On 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 


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

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



Samuel Rajadurai Edwin Rajamanickam [Syncfusion]
Replied On 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

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

It's works, thanks.

Samuel Rajadurai Edwin Rajamanickam [Syncfusion]
Replied On 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

Tim Raymond
Replied On 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

Devi Aruna Maharasi Murugan [Syncfusion]
Replied On 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 


Tim Raymond
Replied On 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.

Samuel Rajadurai Edwin Rajamanickam [Syncfusion]
Replied On 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 
  


Pavol Majchrak
Replied On 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.





Muneesh Kumar G [Syncfusion]
Replied On 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.  
 
 
 
  
 


Pavol Majchrak
Replied On 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.



Muneesh Kumar G [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;