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
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. Different color for data markers inside Line Series graph

Different color for data markers inside Line Series graph

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

3 Replies
BK Bharathiraja K Syncfusion Team 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. 


ZR Zhang RuiHua replied to Bharathiraja K 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.

BK Bharathiraja K Syncfusion Team 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. 


Loader.
Up arrow icon