1. Home
  2. Forum
  3. Xamarin.Android
  4. Aligning Column with Candlestick in a chart

Aligning Column with Candlestick in a chart


Hi,

When adding candle stick series and column series onto a chart, column x position doesn't align to candle stick. 
Tried spacing, width, stackseries, also setting SideBySideSeriesPlacement didn't work.
Please view the attached image. The aim was to build candlestick with volume. 

Is it possible to set / offset x drawing position of column series? Thanks in advance!



Attachment: Capture_afd88c55.zip

9 Replies
DV Divya Venkatesan Syncfusion Team May 8, 2018 10:16 AM UTC

Hi Anton, 
 
Thanks for using Syncfusion products. 
 
We have prepared a sample based on your provided details. ColumnSeries and CandleSeries aligned in same x position by setting SideBySideSeriesPlacement as false as shown in the below code snippet. 
 
Code snippet [C#]: 
chart.SideBySideSeriesPlacement = false; 
 
Please download the sample from the following link. 
 
 
Output:  
 
  
If still you face the problem, please revert us by modifying the sample based on your application along with replication procedure. This would be helpful for us to serve you. 
 
Regards, 
Divya Venkatesan 


AJ AJ May 9, 2018 01:20 PM UTC

Hi Divya, thank you for your prompt response!  Very happy with Syncfusion response.

I have tried to replicate our code in the sample. Finally, figure out it was due to the data.

Would you be able to try data below? It doesn't render correctly on the given sample and set the  secondaryAxis.Minimum = 700;
  
 FinancialData = new ObservableCollection
            {
                  new Model(new DateTime(2018, 05, 08, 14, 0, 0), 737, 771, 730, 730, 700), // 647),
                  new Model(new DateTime(2018, 05, 08, 15, 0, 0), 730, 767, 728, 732, 710),// 646)

                //new Model(new DateTime(2000, 05, 01), 73, 75, 40, 55, 35),
                //new Model(new DateTime(2000, 05, 02), 71, 75, 40, 50, 25),
                //new Model(new DateTime(2000, 05, 03), 70, 81, 45, 50, 20),
                //new Model(new DateTime(2000, 05, 04), 71, 75, 40, 57, 27),
                //new Model(new DateTime(2000, 05, 05), 65, 70, 40, 45, 30)
            };

Thanks



DV Divya Venkatesan Syncfusion Team May 10, 2018 04:28 PM UTC

Hi Anton, 
  
We have resolved this issue by setting minimum value for Width property of series as shown in the below code snippet. You can modify the Width property as per your requirement. 
  
Code snippet: 
series.Width = 0.02; 
 
  
Please let us know if you need any further assistance. 
  
Regards, 
Divya Venkatesan 
 


AJ AJ May 12, 2018 08:42 AM UTC

Setting width for both series to 0.02 works for limited dataset. Once we expand it to data below. 
The  candle chart doesn't render correctly.

            FinancialData = new ObservableCollection
            {
new Model(new DateTime(2018, 5, 12, 0, 0, 0), 689, 708, 666, 681, 560),
new Model(new DateTime(2018, 5, 11, 20, 0, 0), 681, 709, 677, 689, 561),
new Model(new DateTime(2018, 5, 11, 16, 0, 0), 678, 708, 666, 681, 570),
new Model(new DateTime(2018, 5, 11, 12, 0, 0), 693, 734, 677, 678, 569),
new Model(new DateTime(2018, 5, 11, 8, 0, 0), 753, 761, 615, 693, 568),
new Model(new DateTime(2018, 5, 11, 4, 0, 0), 723, 760, 717, 731, 561),
new Model(new DateTime(2018, 5, 11, 0, 0, 0), 737, 772, 722, 723, 559),
new Model(new DateTime(2018, 5, 10, 20, 0, 0), 761, 786, 734, 737, 564),
new Model(new DateTime(2018, 5, 10, 16, 0, 0), 760, 788, 757, 761, 558),
new Model(new DateTime(2018, 5, 10, 12, 0, 0), 763, 789, 756, 760, 557),
new Model(new DateTime(2018, 5, 10, 8, 0, 0), 756, 796, 753, 763, 560),
new Model(new DateTime(2018, 5, 10, 4, 0, 0), 752, 792, 752, 756, 558),
new Model(new DateTime(2018, 5, 10, 0, 0, 0), 750, 786, 743, 752, 558),
new Model(new DateTime(2018, 5, 9, 20, 0, 0), 748, 784, 745, 750, 558),
new Model(new DateTime(2018, 5, 9, 16, 0, 0), 743, 781, 742, 748, 559),
new Model(new DateTime(2018, 5, 9, 12, 0, 0), 716, 779, 716, 743, 561),
new Model(new DateTime(2018, 5, 9, 8, 0, 0), 720, 757, 710, 716, 562),
new Model(new DateTime(2018, 5, 9, 4, 0, 0), 748, 782, 716, 720, 562),
new Model(new DateTime(2018, 5, 9, 0, 0, 0), 750, 789, 740, 748, 558),
new Model(new DateTime(2018, 5, 8, 20, 0, 0), 737, 779, 726, 750, 559),
new Model(new DateTime(2018, 5, 8, 16, 0, 0), 729, 771, 720, 737, 564),
new Model(new DateTime(2018, 5, 8, 12, 0, 0), 745, 782, 728, 729, 560),
new Model(new DateTime(2018, 5, 8, 8, 0, 0), 771, 797, 746, 759, 561),
new Model(new DateTime(2018, 5, 8, 4, 0, 0), 752, 805, 752, 771, 563),
new Model(new DateTime(2018, 5, 8, 0, 0, 0), 756, 794, 734, 752, 564),
new Model(new DateTime(2018, 5, 7, 20, 0, 0), 729, 787, 723, 756, 567),
new Model(new DateTime(2018, 5, 7, 16, 0, 0), 733, 770, 685, 729, 576),
new Model(new DateTime(2018, 5, 7, 12, 0, 0), 735, 775, 686, 731, 603),
new Model(new DateTime(2018, 5, 7, 8, 0, 0), 759, 794, 725, 735, 568),
new Model(new DateTime(2018, 5, 7, 4, 0, 0), 794, 823, 741, 759, 567),
new Model(new DateTime(2018, 5, 7, 0, 0, 0), 781, 821, 776, 794, 557),
new Model(new DateTime(2018, 5, 6, 20, 0, 0), 775, 817, 775, 781, 558),
new Model(new DateTime(2018, 5, 6, 16, 0, 0), 774, 811, 755, 775, 563),
new Model(new DateTime(2018, 5, 6, 12, 0, 0), 799, 823, 769, 774, 563),
new Model(new DateTime(2018, 5, 6, 8, 0, 0), 828, 852, 778, 799, 567),
new Model(new DateTime(2018, 5, 6, 4, 0, 0), 820, 865, 818, 828, 562),
new Model(new DateTime(2018, 5, 6, 0, 0, 0), 813, 840, 801, 838, 561),
new Model(new DateTime(2018, 5, 5, 20, 0, 0), 819, 839, 804, 813, 561),
new Model(new DateTime(2018, 5, 5, 16, 0, 0), 816, 848, 816, 819, 560),
new Model(new DateTime(2018, 5, 5, 12, 0, 0), 817, 836, 808, 816, 558),
new Model(new DateTime(2018, 5, 5, 8, 0, 0), 817, 828, 802, 808, 560),
new Model(new DateTime(2018, 5, 5, 4, 0, 0), 786, 820, 781, 806, 560),
new Model(new DateTime(2018, 5, 5, 0, 0, 0), 781, 816, 781, 786, 558)
                //new Model(new DateTime(2000, 05, 01), 73, 75, 40, 55, 35),
                //new Model(new DateTime(2000, 05, 02), 71, 75, 40, 50, 25),
                //new Model(new DateTime(2000, 05, 03), 70, 81, 45, 50, 20),
                //new Model(new DateTime(2000, 05, 04), 71, 75, 40, 57, 27),
                //new Model(new DateTime(2000, 05, 05), 65, 70, 40, 45, 30)
            };
        }

MK Muneesh Kumar G Syncfusion Team May 14, 2018 11:18 AM UTC

Hi Anton,  
   
We have analyzed your query and we suspect that you are referring a problem that data labels are overlapped on candle segment. If that is the problem, please resolve this by viewing few data points and scroll to view the remaining data point using auto scrolling feature. Please refer below code snippet.  
   
Code snippet:  
  SfChart chart = new SfChart(this); 
            chart.SetBackgroundColor(Color.White); 
 
            chart.Behaviors.Add(new ChartZoomPanBehavior()); 
 
            DateTimeAxis primaryAxis = new DateTimeAxis(); 
            primaryAxis.LabelStyle.LabelFormat = "d/M"; 
            primaryAxis.AutoScrollingDelta = 1; 
            primaryAxis.AutoScrollingDeltaType = DateTimeDeltaType.Days; 
            chart.PrimaryAxis = primaryAxis; 
 
  
Output:  
 
 
Please refer below user guide documentation for more details about AutoScrollingDelta.  
 
 
Note: You must enable the zooming feature to activate the scrolling to view the hidden data points. 
   
If your problem is different from this, please give more information about your requirement that would be helpful for us to provide better solution.  
   
Regards,  
Muneesh Kumar G. 
 


AJ AJ May 14, 2018 11:09 PM UTC

Thank you Munesh for the response.

Below is the result of the rendering. 

Candlestick isn't rendering correctly when both Candle and Column series width is set to 0.02 and chart SideBySideSeriesPlacement = false.

I have also attached Chart_GettingStarted_20180515.zip which contains original sample code with updated sample data.

Many thanks



MK Muneesh Kumar G Syncfusion Team May 15, 2018 12:37 PM UTC

Hi Anton,   
    
In your screenshot, the rendered width of the line is greater than the rendered width of the candle segment, that is why the appearance of candlestick is improper. However, we can reduce the stoke width of line and increase the width of candle using StrokeWidth and Width properties. Please refer the following code snippet.  
    
Code snippet:   
            CandleSeries series = new CandleSeries(); 
            series.ItemsSource = viewModel.FinancialData; 
            series.XBindingPath = "XValue"; 
            series.Open = "Open"; 
            series.Close = "Close"; 
            series.StrokeWidth = 0.5f; 
            series.Width = 0.1; 
            series.High = "High"; 
            series.Low = "Low"; 
  
Output :  
 
 
 
Please refer below user documentation for more details.  
  
 
Please let us know if you have any queries.  
    
Regards,   
Muneesh Kumar G.  
 


AJ AJ May 16, 2018 12:46 AM UTC

Thank you Muneesh. 

We adjusted the width manually based on number of candlestick. All good.

Thank you.

MK Muneesh Kumar G Syncfusion Team May 16, 2018 05:14 AM UTC

Hi Anton, 

Thanks for the update.

We are glad to know that the given solution works. Please let us know if you need any further assistance.

Thanks,
Muneesh Kumar G.

Loader.
Up arrow icon