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

Chart BarSeries: Label Clickable ?

Hello I am developing a BarSeries Chart where as you know Label could be out or in depending size of the bar.
I need bars to be clickable and selctionable to trigger a navigation page. This works fine but I have an issue in case the bar is really small and so difficult for the customer to click / select.
Is there a way to let be also the label clickable? I have a solution using XAML and where for the label I am using a DataTemplate.
Please if this could be feasible would be great to have an example how to do.

BR
GC

5 Replies

PS Parthiban Sundaram Syncfusion Team September 18, 2017 04:51 PM UTC

Hi Garbiele, 
  
Thanks for using Syncfusion products. 
  
You can use label template feature of chart axis along with TagGestureRecognizer to get the notification of click event. Please refer the following data template code snippet of axis labels. Also, we have prepared a simple demo sample for your reference which can be downloaded from below location. 
  
Code Snippet: 
  
  
XAML: 
  
      <DataTemplate x:Key="LabelTemplate"> 
        <StackLayout Orientation="Horizontal" BackgroundColor="Transparent" Padding="5"> 
          <Label x:Name="label" Text="{Binding YValue}" > 
           <Label.GestureRecognizers> 
               <TapGestureRecognizer Tapped="OnLabelClicked"/> 
            </Label.GestureRecognizers> 
          </Label> 
        </StackLayout> 
      </DataTemplate> 
  
C#: 
        private void OnLabelClicked(object sender, EventArgs e) 
        { 
           // code for Nativate the page 
        } 
  
 
  
  
Please let us know, if you need further assistance on this. 
 
Regards,
Parthiban S
 
 



GA Gabriele September 21, 2017 02:47 PM UTC

Hello Thanks for your reply-


the issue I have is that the label should behave exactly as is doing the event I am raising by the chart when user click the chart bar.

In this case the event I am calling is the

void AssetsDetailsChart_SelectionChanging(object sender, ChartSelectionChangingEventArgs e)

in which I am getting the index of the bar selected using e.SelectedDataPointIndex;

Any way to apply it to the label as well to be coherent whit what doing the bar?







PS Parthiban Sundaram Syncfusion Team September 22, 2017 12:38 PM UTC

Hi Garbiele,   
  
Thanks for the update.  
  
You can get the index of the label using BindingContext of the clicked label and actual data collection. Please refer the following code snippet for more details. 
  
  
        private void OnLabelClicked(object sender, EventArgs e)  
        {  
            var viewModel = Chart.BindingContext as ChartViewModel;  
            var list = viewModel.NumericData as System.Collections.IList;  
            var item = (sender as Label).BindingContext as Model;  
            int index = list.IndexOf(item);  
  
         }  
  
  
  
We have created a simple demo sample to demonstrate this. Please download it from below location.   
  
  
Please let us know, if you need further assistance on this.  
  
Regards,  
Parthiban S  



GA Gabriele September 25, 2017 09:25 AM UTC

Super!

It works :)



PS Parthiban Sundaram Syncfusion Team September 26, 2017 05:53 AM UTC

Hi Garbiele,

Thanks for the update. We are glad that the given solution has helped to resolve your requirement. Please let us know, if you need further assistance on this.

Regards,
Parthiban S


Loader.
Live Chat Icon For mobile
Up arrow icon