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
close icon

SfChart, label, image datamarker

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

7 Replies

YP Yuvaraj Palanisamy Syncfusion Team 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.  

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

PS Parthiban Sundaram Syncfusion Team 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

GE Geoffrey 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

PS Parthiban Sundaram Syncfusion Team 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 

GE Geoffrey October 4, 2016 05:42 PM UTC

Hello Parthiban Sundaram,

It's perfect.

Thanks a lot for your help :-)

Best regards,

PS Parthiban Sundaram Syncfusion Team 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  

Live Chat Icon For mobile
Up arrow icon