- Home
- Forum
- Xamarin.Forms
- 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
SIGN IN To post a reply.
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.
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 detailsCode Snippet [XAML]:
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.
SIGN IN To post a reply.
- 3 Replies
- 3 Participants
-
CM Codrina Merigo
- Mar 5, 2019 10:16 AM UTC
- Mar 29, 2019 09:47 AM UTC
