Customization of Zooming Toolbar Position

Hi,

Can we position Zooming Toolbar outside of the SFChart and still we will be able to zoom-in, zoom-out. ?
Acutally we have small size touch panel, So we have customized toolbar button with height width.
But problem is we can't see line series when it goes below Zooming toolbar.

Please let us know if there any solution for this.

Regards
Santosh Bhivase

3 Replies

MK Muneesh Kumar G Syncfusion Team October 19, 2018 01:05 PM UTC

Hi Santosh,  
   
Greetings from Syncfusion, we have analysed your requirement and you can achieve this by overriding SfChart template and setting custom margin for toolkit panel as per the below code snippet.  
 
Code snippet 
         <chart:SfChart  Grid.Row="1" TouchDown="chart_TouchDown" 
                       x:Name="chart" IsManipulationEnabled="True"> 
            <chart:SfChart.Template> 
                <ControlTemplate TargetType="chart:SfChart"> 
                    <Grid> 
                        <Border BorderBrush="{TemplateBinding BorderBrush}"  
                                BorderThickness="{TemplateBinding BorderThickness}" 
                  Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}"  
                                KeyboardNavigation.TabNavigation="None"> 
 
                                .. 
                                            <Canvas x:Name="adorningCanvas" chart:ChartRootPanel.MeasurePriorityIndex="1"></Canvas> 
                                            <Canvas x:Name="Part_ToolkitCanvas" Margin="0,-50,0,0" chart:ChartRootPanel.MeasurePriorityIndex="1"/> 
                                        </chart:ChartRootPanel> 
                                    </chart:ChartDockPanel.RootElement> 
                                </chart:ChartDockPanel> 
                            </Grid> 
                        </Border> 
                    </Grid> 
                </ControlTemplate> 
            </chart:SfChart.Template> 
            <chart:SfChart.Legend> 
                <chart:ChartLegend/> 
            </chart:SfChart.Legend> 
 
We have prepared a sample as per the below code snippet. Please find the sample from the following location.  
 
 
Output:  
 
 
 
Please let us know if you have any queries.  
   
Regards,  
Muneesh Kumar G.  
 



SA santosh October 19, 2018 02:24 PM UTC

Hi Muneesh,

Thanks for quick reply, We will try your solution and  let you know.

Santosh Bhivase


MK Muneesh Kumar G Syncfusion Team October 22, 2018 05:27 AM UTC

Hi Santosh,  
 
Thanks for your update, take your time and we will wait to hear from you. 
 
Regards,  
Muneesh Kumar G.  
 


Loader.
Up arrow icon