Editable chart with user input

[Ad Maiora Studio SRL]

Hi,I'm currently using sf:Chart to draw on UI a chart with some editable features.What I need to achieve is that this chart has to be editable by the user with some sort of "drag&drop" feature. Basically the chart present 3 series. Each series is clickable (I can handle this via events), once clicked the bar become red and two circle indicators are shown, positioned over the series bar (like in the attached image). These circles can be used by the user as draggable controls to change the series values. The user can drag up&down via the "upper circle" (this will change the series y value) or can drag left&right via the "lateral circle" (this will change the series x value).To better understand what I need to achieve I attach a picture which shows my needthanksF

[Ad Maiora Studio SRL]

[Devi Aruna Maharasi Murugan]

Hi Francesco, 

  

Thanks for contacting Syncfusion Support. 

  

In default, SfChart has support for dragging the ColumnSeries and it can be achieved by enabling the EnableSegmentDragging property of ColumnSeries as shown in the below code snippet, 

 

<chart:ColumnSeries EnableSegmentDragging="True"  

                    EnableDragTooltip="False" /> 

 

We are able to change the color of column segment while dragging with MouseLeftButtonDown and MouseLeftButtonUp events of column series. Please find the code snippet, 

 

 

Model selectedModel; 

private void ColumnSeries_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 

     { 

         var column = sender as ColumnSeries; 

        if (e.OriginalSource is Rectangle) 

        { 

              selectedModel = ((e.OriginalSource as Rectangle).Tag as  

                                  ColumnSegment).Item as Model; 

              column.SelectedIndex = (column.ItemsSource as  

                         ObservableCollection<Model>).IndexOf(selectedModel); 

                     

            } 

                

        } 

 

 private void ColumnSeries_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 

        { 

            (sender as ColumnSeries).SelectedIndex = -1; 

        } 

 

Please find the output screenshot, 

 

 

 

  

We have prepared a demo sample for your reference and it can be downloaded from below link, 

  

Sample: SegmentDragging 

  

Kindly refer our UG documentation link to know more about the data editing in chart series, 

  

Link: https://help.syncfusion.com/wpf/sfchart/interactive-features#visual-data-editing 

  

Regards, 

Devi