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

Unable to Centrally align Data Marker

I am unable to centrally align the Data Marker Label text, as I am using it in SFDoughnutSeriesExtension and the Data Marker of it is of SFChartCircularSeriesLabelPosition and it has only two properties i.e inner and outside. So they are getting displayed from the centre of the slice.
How can I align them in centre using the same overridden DrawLabel Method.


                                    SFChart Tempchart;
                Tempchart.Delegate = new ChartDelegate(this);
                Tempchart.Frame = pieChartView.Frame;

                SFDoughnutSeriesExtension lSeries = null;
                if (Tempchart.Series.Count > 0)
                {
                    lSeries = (SFDoughnutSeriesExtension)Tempchart.Series[0];
                    lSeries.Demands = null;
                    lSeries.ItemsSource = null;
                    lSeries.ColorModel.CustomColors = null;
                    Tempchart.Series.Remove(lSeries);
                }

                lSeries = new SFDoughnutSeriesExtension();
                lSeries.Demands = data.Demands;

                if (Constants.isStaticPicEnabled) 
                    lSeries.ItemsSource = data.Demands;
                else 
                    lSeries.ItemsSource = data.Demands;
                
                lSeries.XBindingPath = "Demand";
                lSeries.EnableDataPointSelection = true;
                lSeries.YBindingPath = "Year2010";
                lSeries.DataMarker.ShowLabel = true;

                lSeries.DataMarker.LabelContent = SFChartLabelContent.YValue;
                lSeries.DataMarker.LabelStyle.BackgroundColor = UIColor.Clear;
                lSeries.DataMarker.LabelStyle.Color = UIColor.White;
#if true
                lSeries.DataMarkerPosition = SFChartCircularSeriesLabelPosition.Inside;
#else
            lSeries.DataMarkerPosition = SFChartCircularSeriesLabelPosition.OutsideExtended;
#endif
                lSeries.DataMarker.LabelStyle.LabelPosition = SFChartDataMarkerLabelPosition.Center;

  
 //This is the method written in the extension : ---SFDoughnutSeriesExtension

    public override void DrawLabel(NSString label, CoreGraphics.CGContext ctx, double x, double y, int index)
        {
                     base.DrawLabel((Foundation.NSString)(Demands.Demand.Trim() + "" + Demands.Year2010.ToString()), ctx, x, y, index);
                }             

8 Replies

PS Parthiban Sundaram Syncfusion Team October 6, 2017 03:48 AM UTC

Hi Bucca, 
 
Thanks for using Syncfusion products. 
 
Based on your provided code snippet, we recommend you to use the GetFormattedDataMarkerLabel override method in SFChartDelegate class instead of DrawLabel override method in DoughnutSeries to overcome the reported issue. Please refer the following code snippet for more details. 
 
Code Snippet: 
 
 
public class CustomDelegate : SFChartDelegate 
    { 
        public override NSString GetFormattedDataMarkerLabel(SFChart chart, NSString label, nint index, SFSeries series) 
        { 
            return (NSString)"Label"; 
        } 
    } 
 
 
Please download the sample from following location. 
 
 
Please let us know, if you need further assistance on this. 
 
Regards, 
Parthiban S 



BA bacca October 9, 2017 01:01 PM UTC

Hi Parthiban,

Thanks a lot for this suggestion as it really helped me, though partially. Now I am able to place the marker in the centre the contents of its marker is not getting centrally align.

As I want to align both the data marker as well as data marker label in the centre, and I am using "" between the strings ,So the value comes in the next line.

here is the code snippet:

 public override NSString GetFormattedDataMarkerLabel(SFChart chart, NSString label, nint index, SFSeries series)
        {
            SFDoughnutSeriesExtension series1 = (SFDoughnutSeriesExtension)series;
            string lTitle = series1.Demands[(int)index].Demand.Trim();
            string lValue = series1.Demands[(int)index].Year2010.ToString();
            return (NSString)(lValue + "" + lTitle);
        }
  

 Have attached a screenshot of the chart, kindly look into it for the reference.


Thanks In advance, hope to get the solution asap.


Regards,

bacca.



BA bacca October 9, 2017 01:12 PM UTC

Hi Parthiban,

Thanks a lot for this suggestion as it really helped me, though partially. Now I am able to place the marker in the centre, but the contents of its marker label  is not getting centrally align.

As I want to align both the data marker as well as data marker label in the centre, and I am using "" between the strings values ,So the value comes in the next line and gets left aligned.

As I don't have to display them in a single line.

here is the code snippet:

 public override NSString GetFormattedDataMarkerLabel(SFChart chart, NSString label, nint index, SFSeries series)
        {
            SFDoughnutSeriesExtension series1 = (SFDoughnutSeriesExtension)series;
            string lTitle = series1.Demands[(int)index].Demand.Trim();
            string lValue = series1.Demands[(int)index].Year2010.ToString();
            return (NSString)(lValue + "" + lTitle);
        }
  

 Have attached a screenshot of the chart, kindly look into it for the reference.


Thanks In advance, hoping to get the solution asap.


Regards,

bacca.


Attachment: Screen_Shot_20171009_at_6.22.10_PM_fa611e68.zip


BA bacca October 9, 2017 02:24 PM UTC

Hi Parthiban,

I have edited the code of your project ,

below is the  code reference and a screenshot.

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            chart = new SFChart();
            DataPoints = new ObservableCollection<ChartModel>()
            {
                new ChartModel("January"30),
                new ChartModel("February"30),
                new ChartModel("March"30),
                new ChartModel("April"30),
                new ChartModel("June"30),
            };

            chart.Frame = new CoreGraphics.CGRect(00, View.Frame.Width, View.Frame.Height);

            SFDoughnutSeries series = new SFDoughnutSeries();
            series.ItemsSource = DataPoints;
            series.XBindingPath = "XValue";
            series.YBindingPath = "YValue";
            series.DataMarker.ShowLabel = true;
            series.DataMarker.LabelContent = SFChartLabelContent.YValue;
            series.DataMarker.LabelStyle.BackgroundColor = UIColor.Clear;
            series.DataMarker.LabelStyle.Color = UIColor.White;
            series.DataMarkerPosition = SFChartCircularSeriesLabelPosition.Inside;
            series.DataMarker.LabelStyle.LabelPosition = SFChartDataMarkerLabelPosition.Center;
            chart.Series.Add(series);

            chart.Delegate = new CustomDelegate();

            View.AddSubview(chart);
        }

        public override void ViewDidLayoutSubviews()
        {
            base.ViewDidLayoutSubviews();
        }
    }

    public class CustomDelegate : SFChartDelegate
    {
        public override NSString GetFormattedDataMarkerLabel(SFChart chart, NSString label, nint index, SFSeries series)
        {
            ObservableCollection<ChartModel> DataPoints = new ObservableCollection<ChartModel>();
            DataPoints = (System.Collections.ObjectModel.ObservableCollection<RealTimeData.ChartModel>)series.ItemsSource;
            return (NSString)(DataPoints[(int)index].YValue.ToString() + "" + DataPoints[(int)index].XValue.ToString());
        }
    }

As per the screenshot, I want that "30" should be centrally aligned wrt all the Months as now it is at the left.

Regards,

Baccca


Attachment: Screen_Shot_20171009_at_7.48.05_PM_a026e9e6.zip


PS Parthiban Sundaram Syncfusion Team October 10, 2017 11:59 AM UTC

Hi Bucca,  
 
Thanks for the update.  
 
You can achieve this requirement with help of ViewForDataMarkerLabel override method in SFChartDelegate class to overcome the reported issue. Please refer the following code snippet for more details.  
 
Code Snippet: 
 
  
        public override UIView ViewForDataMarkerLabel(SFChart chart, NSString label, nint index, SFSeries series) 
        {           
            var dataPoints = (series.ItemsSource as IList<ChartModel>); 
             
            UIView customView = new UIView(); 
            customView.Frame = new CGRect(0, 0, 80, 20); 
             
            UILabel label1 = new UILabel(); 
            label1.Frame = new CGRect(3, 0, 60, 20); 
            label1.Text = (NSString)(dataPoints[(int)index].YValue.ToString()); 
            label1.TextColor = UIColor.White; 
            label1.Font = UIFont.FromName("Helvetica", 12f); 
            label1.TextAlignment = UITextAlignment.Center; 
             
            UILabel label2 = new UILabel(); 
            label2.Frame = new CGRect(3, 20, 60, 20); 
            label2.Text = (NSString)(dataPoints[(int)index].XValue); 
            label2.Font = UIFont.FromName("Helvetica", 12f); 
            label2.TextColor = UIColor.White; 
            label2.TextAlignment = UITextAlignment.Center; 
             
            customView.AddSubview(label1); 
            customView.AddSubview(label2); 
            return customView; 
         
 
 
 
Please download the sample from following location.  
 
 
Please let us know, if you need further assistance on this.  
 
Regards,  
Parthiban S. 



BA bacca October 10, 2017 02:39 PM UTC

Hi Parthiban,

I followed your steps, but due to recreation of outlets, there occurs memory leakage and sometimes SIGSEV error is shown and app crashes immediately.

Also you have used both the extension as well as the delegate method.

Do I also need to implement both these methods, as currently I am using only the delegate one.


Regards,

bacca.



PS Parthiban Sundaram Syncfusion Team October 11, 2017 05:00 PM UTC

Hi Bucca,

Thanks for the update.

Regarding the query about memory leak issue

Currently, we are analyzing the reported memory leak issue. We will update you more details in one business day October 12, 2017.

Regarding the query about need to implement both extension and delegate

You can achieve your requirement with the help of SFChartDelegate method alone as per previous updated solution.

Regards,
Parthiban S



PS Parthiban Sundaram Syncfusion Team October 12, 2017 11:59 AM UTC

Hi Bucca,

Thanks for the patience.

Regarding the query about memory leak issue

We have created an incident under your Direct Trac account. So, we request to follow the incident for further details.

Our Direct Trac support system can be accessed from the following link:

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents  

Regards,
Parthiban S 


Loader.
Live Chat Icon For mobile
Up arrow icon