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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfChart, label, image datamarker

Thread ID:





126053 Sep 20,2016 08:00 PM UTC Oct 5,2016 05:42 AM UTC Xamarin.Android 7
Tags: SfChart
Asked On September 20, 2016 08:00 PM UTC

Thread ID:





126052 Sep 20,2016 03:59 PM
Xamarin.Forms 0
Tags: SfChart
Asked on September 20, 2016 03:59 PM

I attached two files.
- One contains the result I want to my android SfChart
- The second is the actual rendering

How to modify the current code to have this rendering ?

I use the following code :

SfChart chart = new SfChart(Activity);
            chart.VerticalScrollBarEnabled = false;
            chart.HorizontalScrollBarEnabled = false;

            CategoryAxis primaryAxis = new CategoryAxis();
            primaryAxis.Visibility = Visibility.Gone;
            primaryAxis.ShowMajorGridLines = false;
            chart.PrimaryAxis = primaryAxis;

            NumericalAxis secondaryAxis = new NumericalAxis();
            secondaryAxis.Visibility = Visibility.Gone;
            secondaryAxis.ShowMajorGridLines = false;
            chart.SecondaryAxis = secondaryAxis;

            List<Integer> colors = new List<Integer>();
            ObservableArrayList data = new ObservableArrayList();
            foreach (ParticipantViewModel participantViewModel in this._participants.Where(x => x.Difference != 0))
                data.Add(new ChartDataPoint(participantViewModel.Name, participantViewModel.Difference));
                if (participantViewModel.Difference > 0)
                    colors.Add(new Integer(new Color(Constants.ColorPositiveR, Constants.ColorPositiveG, Constants.ColorPositiveB)));
                    colors.Add(new Integer(new Color(Constants.ColorNegativeR, Constants.ColorNegativeG, Constants.ColorNegativeB)));

            ColumnSeries series1 = new ColumnSeries()
                DataSource = data,
                TooltipEnabled = true,
                AnimationEnabled = true,
                AnimationDuration = 0.2,
                Label = "Income"
            series1.ColorModel.ColorPalette = ChartColorPalette.Custom;
            series1.ColorModel.CustomColors = colors;
            series1.DataMarker.MarkerType = DataMarkerType.Ellipse;
            series1.DataMarker.ShowMarker = true;
            series1.DataMarker.ShowLabel = true;

Thanks in advance

Attachment: Pictures_33e0d2b1.7z

Yuvaraj Palanisamy [Syncfusion]
Replied On September 21, 2016 03:18 PM UTC

Hi Tincani, 
We have already logged a feature report for DataMarker Label Template support in Xamarin.Android and this will be available in our upcoming Volume 3, 2016 release which is estimated to be rolled out by end of September, 2016.  
Disclaimer : The date for the feature implementation is tentative and not a commitment on our parts.  

Replied On September 29, 2016 02:25 PM UTC


Is the feature avaiable in Volume 3 2016 ?
Is there a sample or documentation about the feature ?

Thanks in advance,

Parthiban Sundaram [Syncfusion]
Replied On September 30, 2016 12:39 PM UTC

Hi Tincani,

We are glad to announce that our Essential Studio 2016 Volume 3 v14.3.0.49 is rolled out and is available for download under the following link.
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

We have also prepared a sample for this. Please check and let us know if you have any concerns.

Sample: http://www.syncfusion.com/downloads/support/forum/126053/ze/Datamarker-1239844444 

Parthiban S

Replied On September 30, 2016 01:30 PM UTC

Thanks a lot for your sample, it's almost good

Just have two problems :
- I want that my label picture have the same width as the ColumnSegment, I try to get the columns segment width without success, the size is equal to 0
- I change the label style position to outer, but picture are cut, must I modify minimum and maximum to do that ?

private void Series1DataMarkerLabelCreated(object sender, ChartSeries.DataMarkerLabelCreatedEventArgs e)
            ColumnSeries serie = (ColumnSeries) sender;
            ColumnSegment segment = (ColumnSegment)serie.ChartSegments.Get(e.P0.Index);
            LinearLayout layout = new LinearLayout(this.Activity);
            layout.Orientation = Android.Widget.Orientation.Vertical;
            ImageView image = new ImageView(this.Activity);
            image.LayoutParameters = new ViewGroup.LayoutParams(new LinearLayout.LayoutParams(120, 80));
            ParticipantViewModel participantViewModel = this._list[e.P0.Index];
            Bitmap bitmap = BitmapFactory.DecodeByteArray(participantViewModel.ImageBytes, 0, participantViewModel.ImageBytes.Length);
            e.P0.View = layout;

Best regards,

Attachment: Screenshot_20160930152433_13c3b860.zip

Parthiban Sundaram [Syncfusion]
Replied On October 4, 2016 03:57 PM UTC

Hi Tincani, 
Regarding the Query I want that my label picture have the same width as the ColumnSegment  
You can use the below code snippet to find the width of the column segment: 
double width = ((chart.SeriesClipRect.Width()) / (((sender as ColumnSeries).DataSource  
                                                     as bservableArrayList).Size())); 
double spacing = (width * 20) / 100; 
double actualSegmentWidth = width - spacing; 
Regarding the Query I change the label style position to outer, but picture are cut, must I modify minimum and maximum to do that ? 
You can set the PlotOffset for secondary axis to achieve your requirement. 
secondaryAxis.PlotOffset = 80; 
We have also modified the sample as per your requirement. Please check and let us know if you require further assistance on this. 
Parthiban S 

Replied On October 4, 2016 05:42 PM UTC

Hello Parthiban Sundaram,

It's perfect.

Thanks a lot for your help :-)

Best regards,

Parthiban Sundaram [Syncfusion]
Replied On October 5, 2016 05:42 AM UTC

Hi Tincani,

Thanks for the update.

We are glad to hear that the given solution worked. Please get back to us if you need further assistance.

Parthiban S  


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon