Selection based events and UI customizations in SfChart Series

[Joseph Cellucci]

I am searching for an appropriate series which has selection based events and UI customizations to achieve the sample UI design attached. My series looks like vertical bars with caps on top and bottom and for this I need the selection based events and UI customizations to highlight the selected bar in the UI. Please refer the attachment and help me with a sample if this can be achieved with Syncfusion SfChart.

Attachment: chart_e41c406b.zip

[Devakumar Dhanapoosanam]

Hi Joseph Cellucci, 

 

Greetings from Syncfusion. 

 

We would like to let you know that ErrorBarSeries don't have interactive feature and cannot change the stroke value based on the selection. 

 

We have achieved your requirement by adding two ErrorBarSeries, one is actual ErrorBar and one is used for the selection style customization with singe data. And add a ScatterSeries by setting the actual ErrorBar series same ItemsSource and XBindingPath, YBindingPath value. And EnableDataSelection for scatter series, and when click on the scatter series in the SelectionChanged event we can add or remove the single data point in ErrorBar series with customized stroke width and color. Please refer the below code for more details. 

 

public class ViewModel 

{ 

    public ObservableCollection<ChartDataModel> RevenueDetails { get; set; } 

    public ObservableCollection<ChartDataModel> SelectedData { get; set; } 

 

    public ViewModel() 

    { 

        … 

        RevenueDetails = new ObservableCollection<ChartDataModel>(); 

                     

        SelectedData = new ObservableCollection<ChartDataModel>(); 

    } 

} 

 

<chart:SfChart HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 

               SelectionChanged="SfChart_SelectionChanged"> 

    …. 

    <chart:ErrorBarSeries x:Name="errorbarSeries"  

                              ItemsSource="{Binding RevenueDetails}"  

                              XBindingPath="Date" YBindingPath="Value" 

                              HorizontalErrorValue="3" VerticalErrorValue="3" EnableTooltip="True" 

                              Type="Fixed" Mode="Vertical" HorizontalDirection="Both" 

                              VerticalDirection="Both" > 

    </chart:ErrorBarSeries> 

 

    <chart:ErrorBarSeries x:Name="customizeSelectedErrorBar"  

                              ItemsSource="{Binding SelectedData}"  

                              XBindingPath="Date" YBindingPath="Value" 

                              HorizontalErrorValue="3" VerticalErrorValue="3" EnableTooltip="True" 

                              Type="Fixed" Mode="Vertical" HorizontalDirection="Both" 

                              VerticalDirection="Both" > 

        … 

        <chart:ErrorBarSeries.VerticalLineStyle> 

            <chart:ErrorBarLineStyle StrokeWidth="8" StrokeColor="Blue"/> 

        </chart:ErrorBarSeries.VerticalLineStyle> 

        <chart:ErrorBarSeries.VerticalCapLineStyle> 

            <chart:ErrorBarCapLineStyle 

                        StrokeColor = "Blue" 

                        StrokeWidth = "5" 

                        IsVisible = "true"/> 

        </chart:ErrorBarSeries.VerticalCapLineStyle> 

    </chart:ErrorBarSeries> 

 

    <chart:ScatterSeries ItemsSource="{Binding RevenueDetails}"  

                         EnableDataPointSelection="True"  

                         XBindingPath="Date" YBindingPath="Value"  

                         ShapeType="Ellipse" 

                         Color="LightBlue" 

                         ScatterWidth="15" ScatterHeight="15" 

                         SelectedDataPointColor="Blue"> 

    </chart:ScatterSeries> 

</chart:SfChart> 

 

private void SfChart_SelectionChanged(object sender, ChartSelectionEventArgs e) 

{ 

    if (e.SelectedSeries != null && e.SelectedSeries is ScatterSeries) 

    { 

        if (e.SelectedDataPointIndex != -1) 

        { 

            if (viewModel.SelectedData.Count > 0) 

            { 

                viewModel.SelectedData[0] = viewModel.RevenueDetails[e.SelectedDataPointIndex]; 

            } 

            else 

            { 

                viewModel.SelectedData.Add(viewModel.RevenueDetails[e.SelectedDataPointIndex]); 

            } 

        } 

        else 

        { 

            if (viewModel.SelectedData.Count > 0) 

            { 

                viewModel.SelectedData.RemoveAt(0); 

            } 

        } 

    } 

} 

 

Please find the sample from the below link, 

Sample: https://www.syncfusion.com/downloads/support/forum/165013/ze/165013-1296317905.zip  

 

Screenshot:  

After selecting the scatter segment 

 

 

Please refer the link for more details, 

 

UG: https://help.syncfusion.com/xamarin/charts/charttypes#customization  

https://help.syncfusion.com/xamarin/charts/selection#data-point-selection  

 

Please check and let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D