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

Reorganizing Charts using drag and drop

My app has a bunch of charts on one of its pages and i want to be able to reorganize them with drag and drop. But i couldn't find any information on how to do it. Are there any ways to implement it in Xamarin Forms?

16 Replies

BK Bharathiraja K Syncfusion Team April 26, 2019 01:37 PM UTC

Hi Nikolaev, 
We have prepared the sample based on your requirement that can be downloaded from below link. 
If your requirement is differing from the above sample, please share more details about your requirement. We will analyze and provide you solution as much as possible. 

TN Teodor Nikolaev April 30, 2019 07:11 AM UTC

Will this method work if I have multiple types of charts that I want to move around (e.g. combination of pie chart, line chart and a histogram chart), also i don't know if it matters but the charts are inside one of the Content pages inside a TabbedPage

BK Bharathiraja K Syncfusion Team April 30, 2019 12:39 PM UTC

Hi Nikolaev,  
Thanks for your update. We don’t have dragging support in Chart. We have provided the previous update as workaround solution using our SfListView to achieve your requirement. However, you can use the same SfListView in Content Page or Tabbed Page according to your requirement.  
Query: Will this method work if I have multiple types of charts that I want to move around 
We are not clear with the above query. So, could you please provide more details regarding your requirement and application scenario. It will be more helpful to investigate and provide you better solution. 

TN Teodor Nikolaev April 30, 2019 01:24 PM UTC


I've uploaded a picture of a sample page that would better illustrate my question, which is that if the charts are of different type how would i put them in the same listView so that i can reorganize them using your previous workaround and if that workaround doesn't work with multiple different types of charts then is there a way to reorganize a page filled with different charts, as in the picture that's attached, using drag and drop.

Thank you in advance.

Attachment: SyncFusionForum_eb8f772a.zip

BK Bharathiraja K Syncfusion Team May 1, 2019 09:06 AM UTC

Hi Nikolaev, 
We can achieve your requirement by binding the ChartSeries with ChartSeriesCollection property from model by below 
<chart:SfChart x:Name="chart"  Series="{Binding SeriesCollection}"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
We have prepared the sample, that can be downloaded from below link.  
Please revert us any time we happy to help you always.  

TN Teodor Nikolaev May 1, 2019 12:56 PM UTC

Thank you that worked perfectly, is there a documentation on the "ChartSeriesCollection" ? Because i was wondering whether i could select different background colours to the charts inside the collection?

BK Bharathiraja K Syncfusion Team May 2, 2019 08:52 AM UTC

Hi Nikolaev,  
Query: is there a documentation on the "ChartSeriesCollection" ? 
We already have the documentation for SeriesCollection in the name of Multi-Series. Please find the documentation link below here. 
Query: select different background colours to the charts inside the collection? 
You can set different color to Chart by using BackgroundColor property. Create a property ChartColor in Model and set the different color in ViewModel and finally bind to Chart BackgroundColor property as you see in the below code snippet.  
Code Snippet [C#]:  
 public class ChartModel
        public ChartSeriesCollection SeriesCollection { get; set; }
      public Color ChartColor { get; set; }
        public ChartModel(ChartSeriesCollection seriesCollection, Color chartColor)
            SeriesCollection = seriesCollection;
          ChartColor = chartColor;
View Model: 
new ChartModel(
                    new ChartSeriesCollection()
                        new LineSeries()
                            //or else bind your data model.
                            ItemsSource = new ObservableCollection<Model>(){new Model("Information Technology", 32), new Model("India",53),new Model("Saudi",26), new Model("USA",82), new Model("Japan",43),
                            XBindingPath = "Countries",
                            YBindingPath = "Count",
                            XAxis = new CategoryAxis(),
                            YAxis = new NumericalAxis(),
                    }, Color.LightCoral
<chart:SfChart x:Name="chart"  Series="{Binding SeriesCollection}" BackgroundColor="{Binding ChartColor}"> 
Please let us know, if you have any other queries. 

TN Teodor Nikolaev May 2, 2019 09:14 AM UTC

Thank you for all the help!

BK Bharathiraja K Syncfusion Team May 2, 2019 09:52 AM UTC

Hi Nikolaev,   
You are welcome. 

TN Teodor Nikolaev July 16, 2019 12:00 PM UTC


Regarding this chartSeriesCollection i was wondering if there is anyways to add some sort of table (like an excel table) that represents data(for example a DataGrid) instead of one of the charts? 

SM Saravanan Madheswaran Syncfusion Team July 18, 2019 09:29 AM UTC

Hi Teodor, 
We would like to let you know that we won’t able to add other views other than series in ChartSeriesCollection property, but by using DataTemplateSelector support in SfListView we can able to switch the template based on some condition. We have prepared sample by placing SfDataGrid instead of one of the charts and it can be downloaded from the below link. 
Please refer the below links for more details: 
Please get back to us for further assistance.  
Saravanan M. 

TN Teodor Nikolaev July 19, 2019 12:20 PM UTC


Thank you for the previously proposed solution it did in fact work, but another problem occurred, i have doughnut charts that are dynamically created, the problem is that if i click and hold on the chart itself nothing happens but if i put some padding in the frame and i click and hold on the farm itself(not the chart) i am able to move the whole thing around and reorder it, same if i click and hold on the parts of the listviewItem that are separate from the chart. I've uploaded a picture to better describe it i can click and hold the red (frame) and white(listItem) parts of the screen but the darker Green (the chart itself) doesn't allow me to click and hold to re position.

Attachment: Capture_b6584451.zip

RA Rachel A Syncfusion Team July 24, 2019 10:30 AM UTC

Hi Teodor, 
We would like to let you know that the problem is due to chart interactions are invoked instead of ListView. So, to restrict the touch interactions for the chart we can set the InputTransparent property as true. We have attached video and sample for your reference. 
Please find the code snippet below for the same. 
<chart:SfChart x:Name="chart" InputTransparent="True" Series="{Binding SeriesCollection}" BackgroundColor="{Binding ChartColor}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" /> 

TN Teodor Nikolaev August 20, 2019 08:10 AM UTC

So setting the property InputTrasnparent to true didn't do the job, but i figured out that whenever the property explode on touch is enabled i cant reorder with drag and drop, but if i disable the property drag and drop works fine. Any ideas how i can have explode on touch enabled and be able to drag and drop?

RA Rachel A Syncfusion Team August 21, 2019 12:52 PM UTC

Hi Teodor, 
Currently we are checking for the feasibility to achieve this requirement. We need two more business days to complete and will update you the status on 23rd August 2019. 

MK Muneesh Kumar G Syncfusion Team August 23, 2019 11:02 AM UTC

Hi Teodor, 
Thanks for your patience.  
We have analysed your requirement and we have prepared sample by enabling both drag and drop of listview and touch interactions on chart by setting DragIndicatorView for SfListView.  
We can use the DragIndicatorView to perform drag and drop operation. Please refer the below code. 
Code snippet: 
<DataTemplate x:Key="ChartTemplate"> 
            <ColumnDefinition Width="30"></ColumnDefinition> 
        <chart:SfChart x:Name="chart" Series="{Binding SeriesCollection}" BackgroundColor="{Binding ChartColor}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
        <syncfusion:DragIndicatorView x:Name="dragIndicator" ListView="{x:Reference listView}" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center"> 
            <Grid > 
                <Image Source="DragIndicator.png" VerticalOptions="Center" HorizontalOptions="Center" /> 
Please refer the below UG for more details. 
Note: If you enable touch interactions for chart means, touches will not be passed to its parent while perform any interaction by default.  
Muneesh Kumar G 

Live Chat Icon For mobile
Up arrow icon