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

Editable chart with user input

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

2 Replies

AM Ad Maiora Studio SRL March 31, 2017 09:39 AM UTC

DA Devi Aruna Maharasi Murugan Syncfusion Team April 3, 2017 01:00 PM UTC

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  
 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, 

Live Chat Icon For mobile
Up arrow icon