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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Different color for data markers inside Line Series graph

Thread ID:

Created:

Updated:

Platform:

Replies:

143106 Mar 5,2019 10:16 AM UTC Mar 29,2019 09:47 AM UTC Xamarin.Forms 3
loading
Tags: SfChart
Codrina Merigo
Asked On March 5, 2019 10:16 AM UTC

Hi,

It is possible to have different color markers inside a graph? Let's say if the Y value is major that 50, color them blue, red otherwise.




Thank you

Bharathiraja K [Syncfusion]
Replied On March 6, 2019 01:08 PM UTC

Hi Codrina Merigo, 
  
Greetings from Syncfusion.  
We have analyzed your requirement and we can achieve your requirement by using the chart series DataMarkerLabelCreated event in Android and iOS platform. 
  
Please refer the below code snippet for more details 
  
Code Snippet [XAML]: 
<chart:ColumnSeries x:Name="series" ItemsSource="{Binding Data}"                      
                    DataMarkerLabelCreated="ColumnSeries_DataMarkerLabelCreated" 
                    XBindingPath="XValue" YBindingPath="Value" > 
  
Code Snippet [C#]: 
private void ColumnSeries_DataMarkerLabelCreated(object sender,   
                               ChartDataMarkerLabelCreatedEventArgs e) 
{ 
      if (double.TryParse(e.DataMarkerLabel.Label, out double res)) 
      { 
            if(res >= 50) 
            { 
                e.DataMarkerLabel.MarkerColor = Color.Blue; 
            } 
            else 
            { 
                e.DataMarkerLabel.MarkerColor = Color.Red; 
            } 
      } 
} 
  
Please refer the below UG link for more details. 
  
In UWP platform, we can’t achieve this since DataMarkerLabeCreated support is not available. 
We are working to provide a feasible solution in UWP platform and we will update you the details in two business day March 8th, 2019. We appreciate your patience until then. 
  
We have prepared a sample for your requirement in Android and iOS.  Please find the sample from the below link 
   
Regards, 
Bharathi. 


Zhang RuiHua
Replied On March 29, 2019 02:42 AM UTC

Hi Codrina Merigo, 
  
Greetings from Syncfusion.  
We have analyzed your requirement and we can achieve your requirement by using the chart series DataMarkerLabelCreated event in Android and iOS platform. 
  
Please refer the below code snippet for more details 
  
Code Snippet [XAML]: 
<chart:ColumnSeries x:Name="series" ItemsSource="{Binding Data}"                      
                    DataMarkerLabelCreated="ColumnSeries_DataMarkerLabelCreated" 
                    XBindingPath="XValue" YBindingPath="Value" > 
  
Code Snippet [C#]: 
private void ColumnSeries_DataMarkerLabelCreated(object sender,   
                               ChartDataMarkerLabelCreatedEventArgs e) 
{ 
      if (double.TryParse(e.DataMarkerLabel.Label, out double res)) 
      { 
            if(res >= 50) 
            { 
                e.DataMarkerLabel.MarkerColor = Color.Blue; 
            } 
            else 
            { 
                e.DataMarkerLabel.MarkerColor = Color.Red; 
            } 
      } 
} 
  
Please refer the below UG link for more details. 
  
In UWP platform, we can’t achieve this since DataMarkerLabeCreated support is not available. 
We are working to provide a feasible solution in UWP platform and we will update you the details in two business day March 8th, 2019. We appreciate your patience until then. 
  
We have prepared a sample for your requirement in Android and iOS.  Please find the sample from the below link 
   
Regards, 
Bharathi. 


Hello, I have same problem in uwp.

I want to use DataMarkerLabelCreated event in uwp.
What should I do?

Thanks.

Bharathiraja K [Syncfusion]
Replied On March 29, 2019 09:47 AM UTC

Hi Codrina,  
 
We currently don’t have support for datamarker label created event in UWP platform, we have achieved the same scenario using Datamarker label template and sets the icon color using IValueConverter. 
 
Please find the code snippet below.  
<chart:ChartDataMarker LabelContent="DataMarkerLabel"> 
                                <chart:ChartDataMarker.LabelTemplate> 
                                    <DataTemplate> 
                                        <local:IconViewRenderer x:Name="Circle" Color="{Binding Converter={StaticResource iconColorConverter}}" CornerRadius = "25"  Margin="7,2.5,3,25" HeightRequest="15"  WidthRequest="15" > 
                                        </local:IconViewRenderer> 
                                    </DataTemplate> 
                                </chart:ChartDataMarker.LabelTemplate> 
                                <chart:ChartDataMarker.LabelStyle> 
                                    <chart:DataMarkerLabelStyle LabelPosition="Center"/> 
                                </chart:ChartDataMarker.LabelStyle> 
</chart:ChartDataMarker> 
 
To convert the icon color based on the yValues 
public class IconColorConverter : IValueConverter 
    { 
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
 
            var datamarker = value as ChartDataMarkerLabel; 
            Console.WriteLine(value); 
            Console.WriteLine(datamarker); 
            if(datamarker != null) 
            { 
                double yValue = double.Parse(datamarker.Label); 
                if(yValue > 50) 
                { 
                    return Color.Red; 
                } 
                else 
                { 
                    return Color.Blue; 
                } 
            } 
            return Color.Default; 
        } 
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            return value; 
        } 
    } 
 
To get rounded icon, need to set custom corner radius for box view by below.  
  public class IconViewRenderer : BoxView 
    { 
        public IconViewRenderer() 
        { 
            if (Device.RuntimePlatform == Device.UWP) 
            { 
                this.HeightRequest = 15; 
            } 
            else 
            { 
                this.HeightRequest = 5; 
            } 
        } 
 
        //Create a Bindable Property For CornerRadius   
        public static readonly BindableProperty CornerRadiusProperty = 
            BindableProperty.Create(nameof(CornerRadius), typeof(double), typeof(IconViewRenderer), 0d); 
 
        public double CornerRadius 
        { 
            get 
            { 
                return (double)GetValue(CornerRadiusProperty); 
            } 
            set 
            { 
 
                SetValue(CornerRadiusProperty, value); 
            } 
        } 
    } 
 
In UWP project 
class CustomBoxViewRenderer : BoxViewRenderer 
    { 
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.BoxView> e) 
        { 
            base.OnElementChanged(e); 
            if (Element == null) 
            { 
                return; 
            } 
            var element = (IconViewRenderer)Element; 
            Control.RadiusY = (float)element.CornerRadius; 
            Control.RadiusX = (float)element.CornerRadius; 
            Control.StrokeThickness = (float)element.CornerRadius; 
        } 
    } 
 
In Android 
  public class CustomBoxViewRenderer : BoxRenderer 
    { 
 
        private float _cornerRadius; 
        private RectF _bounds; 
        private Path _path; 
 
        protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e) 
        { 
            base.OnElementChanged(e); 
            if (Element == null) 
            { 
                return; 
            } 
            IconViewRenderer element = (IconViewRenderer)Element; 
            _cornerRadius = TypedValue.ApplyDimension(ComplexUnitType.Dip, (float)element.CornerRadius, Context.Resources.DisplayMetrics); 
        } 
 
        protected override void OnSizeChanged(int w, int h, int oldw, int oldh) 
        { 
            base.OnSizeChanged(w, h, oldw, oldh); 
            if (w != oldw && h != oldh) 
            { 
                _bounds = new RectF(0, 0, w, h); 
            } 
 
            _path = new Path(); 
            _path.Reset(); 
            _path.AddRoundRect(_bounds, _cornerRadius, _cornerRadius, Path.Direction.Cw); 
            _path.Close(); 
        } 
 
        public override void Draw(Canvas canvas) 
        { 
            canvas.Save(); 
            canvas.ClipPath(_path); 
            base.Draw(canvas); 
            canvas.Restore(); 
        } 
    } 
 
In iOS 
    public class CustomBoxViewRenderer : BoxRenderer 
    { 
        protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e) 
        { 
            base.OnElementChanged(e); 
            if (Element == null) return; 
            Layer.MasksToBounds = true; 
 
            Layer.CornerRadius = (float)((IconViewRenderer)this.Element).CornerRadius / 3.0f; 
        } 
    } 
 
And we have attached the runnable sample in below link,  
 
 
Please get back to us, if you have any queries.  
 
Regards, 
Bharathi. 


CONFIRMATION

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

;