21 Answers, 1 is accepted
Rank 1
The feature you're referring to is commonly known as a "Point Template", the Xamarin.Forms Chart API doesn't yet support this but we do have it on our backlog: Chart: Custom shapes and colors for data points.
The label strategy/template can't be set in Xamarin.Forms directly (see available Labels features here), however you can access the native platform's Label features through a custom renderer or Platform Effect.
- Android - RadChartView Labels
- UWP - Label Strategy
- iOS - Both the point template and labels strategy can be customized on iOS via custom renderer, see the following article for more information: Point Labels: Customization
If you have trouble using any of the native controls' Label features, please open a support ticket for that specific native control so that the correct engineering team can assist you further.
Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Rank 1
Hello Lance,
I was able to assemble something but I am a bit stuck. This is my test code:
[assembly: ExportRenderer(typeof(RadCartesianChart), typeof(MyLabelRenderer))]
namespace IRA.iOS.Renderers
{
public class MyLabelDelegate : TKChartDelegate
{
public override TKChartPointLabel LabelForDataPoint(TKChart chart, TKChartData dataPoint, string propertyName, TKChartSeries series, nuint dataIndex)
{
TKChartDataPoint point = (TKChartDataPoint)dataPoint;
series.Style.PointShape = new TKPredefinedShape(TKShapeType.Circle, new SizeF(8, 8));
series.Style.PointLabelStyle.TextHidden = false;
series.Style.PointLabelStyle.LabelOffset = new UIOffset(0, -24);
series.Style.PointLabelStyle.Insets = new UIEdgeInsets(-1, -5, -1, -5);
series.Style.PointLabelStyle.LayoutMode = TKChartPointLabelLayoutMode.Manual;
series.Style.PointLabelStyle.Font = UIFont.SystemFontOfSize(10);
series.Style.PointLabelStyle.TextAlignment = UITextAlignment.Center;
series.Style.PointLabelStyle.Fill = new TKSolidFill(new UIColor((float)(108 / 255.0), (float)(181 / 255.0), (float)(250 / 255.0), (float)1.0));
series.Style.PointLabelStyle.ClipMode = TKChartPointLabelClipMode.Hidden;
series.Style.PointLabelStyle.TextOrientation = TKChartPointLabelOrientation.Horizontal;
series.Style.PointLabelStyle.TextColor = UIColor.Red;
return new TKChartPointLabel(point, series, String.Format("{0}", point.DataYValue));
}
}
public class MyLabelRenderer : CartesianChartRenderer
{
public MyLabelRenderer()
{
}
protected override TKChartDelegate CreateChartDelegate(RadCartesianChart chart)
{
return new MyLabelDelegate();
}
}
}
I can't understand why the first custom label text color is black. The custom renderer code is executed six times and this is the correct number of the points with which I am building the spline chart.
You can see it in the picture attached.
Thank you for sharing the code and screenshot. It is unexpected that the first label isn't getting the applied style. I am investigating this now.
So that I can more accurately test this, can you please also share the Xamarin.Forms code for the Chart? I only need the RadCartesianChart and children (axes, series, etc), not the view model or data,
I look forward to your reply.
Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
I've completed my initial tests using some static data and I'm not able to replicate what you're seeing,
Here's a screenshot, you can see all the labels are Red for me (no matter how many data points are in the series):
The same is true for other Spline series types (SlineArea):
Check to make sure that "Enable Incremental Builds" is not checked in the iOS project's "Properties -> iOS Build" settings:
This can lead to unexpected behavior, especially when small changes are not detected correctly.
Further Investigation
Can you run/edit the attached demo and see if you're able to replicate the behavior so that I can investigate the issue directly?
I look forward to your reply.
Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Rank 1
Rank 1
So, Lance, I've tried your project and it is working. Here is my chart definition. I am doing it in C# code because that is my case.
The only difference is that I am not using CategoricalData and I am not using Value and Category properties from the ViewModel. Could this be the possible reason ?
Here is my chart code:
var chartForDate = new RadCartesianChart { HorizontalAxis = new CategoricalAxis() { LabelFitMode = AxisLabelFitMode.Rotate, LabelFormatter = new DateLabelFormatter(), ShowLabels = true }, VerticalAxis = new NumericalAxis() { Maximum = 0.4, MajorStep = 0.05, ShowLabels = true }, BindingContext = new WeatherViewModel(tideByDate.Values), VerticalOptions = LayoutOptions.FillAndExpand, HeightRequest = 300, }; var series = new SplineAreaSeries() { Fill = Color.WhiteSmoke, Stroke = Color.DarkSlateGray, StrokeThickness = 0.1 }; series.SetBinding(SplineAreaSeries.ItemsSourceProperty, new Binding("Tides")); series.ValueBinding = new PropertyNameDataPointBinding("Height"); series.CategoryBinding = new PropertyNameDataPointBinding("Date"); series.LabelBinding = new PropertyNameDataPointBinding("Date"); series.ShowLabels = true; chartForDate.Series.Add(series); tideChartContainer.Children.Add(chartForDate);Nothing looks immediately wrong with that code, this could be due to a Xamarin timing quirk and a few tweaks might help.
As far as the property names, they certainluy don't need to be "Value" and "Category" this is just the name of the property for the data model in my demo. As long your model's properties are "Height" and "Date" those PropertyNameDataPointBindings are perfect.
The tweaks I mentioned are to try and reorder the way the objects are created. instead of initializing the chart with a new view model object, create it in a variable first.
var weatherViewModel = new WeatherViewModel(tideByDate.Values);var chartForDate = new RadCartesianChart();chartForDate.HorizontalAxis = HorizontalAxis = new CategoricalAxis { LabelFitMode = AxisLabelFitMode.Rotate, LabelFormatter = new DateLabelFormatter(), ShowLabels = true };chartForDate.VerticalAxis = new NumericalAxis() { Maximum = 0.4, MajorStep = 0.05, ShowLabels = true };chartForDate.HeightRequest = 300;chartForDate.BindingContext = weatherViewModel;var series = new SplineAreaSeries(){ Fill = Color.WhiteSmoke, Stroke = Color.DarkSlateGray, StrokeThickness = 0.1};series.SetBinding(SplineAreaSeries.ItemsSourceProperty, new Binding("Tides"));series.ValueBinding = new PropertyNameDataPointBinding("Height");series.CategoryBinding = new PropertyNameDataPointBinding("Date");series.LabelBinding = new PropertyNameDataPointBinding("Date");series.ShowLabels = true;chartForDate.Series.Add(series);tideChartContainer.Children.Add(chartForDate);Another suspicion I have is this could be due to the LabelFormatter. If my suggestion above doesn't help, can you share the DateLabelFormatter class so I can test it directly?
Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Rank 1
I've tried your suggestion but nothing changed. DateLabelFormatter was added after I posted this thread, so I don't think that it is causing the issue.
As you can see on the attached file there are no points and the first Label text is black although I set it explicitly to UIColor.Gray in the CustomRenderer.
However this is the code for the date formatter:
public class DateLabelFormatter : LabelFormatterBase<DateTime> { public override string FormatTypedValue(DateTime value) { return value.ToString("HH:mm"); } }
Rank 1
I don't know what is wrong with my current view model but I've created new view model and everything is working now. I hope to find some time to investigate this.
public class WeatherData { public DateTime Date { get; set; } public double Height { get; set; } } public class WeatherDataViewModel { public WeatherDataViewModel() { } public ObservableCollection<WeatherData> WeatherData { get; set; } = new ObservableCollection<WeatherData> { new WeatherData { Date = new DateTime(2018,10,1, 7, 10, 1), Height = 1.2 }, new WeatherData { Date = new DateTime(2018,8,2, 10,10,1), Height = 1.5 }, new WeatherData { Date = new DateTime(2018,9,11,11,11,11), Height = 1.2 }, new WeatherData { Date = new DateTime(2018,8,4,12,12,12), Height = 1.4 }, new WeatherData { Date = new DateTime(2018,12,5, 13, 13, 13), Height = 1.8 }, new WeatherData { Date = new DateTime(2018,11,6,14,14,14), Height = 1.0 } }; }
Rank 1
After short investigation I finally found what was causing the issue.
The reason was that I am getting the data from a remote service with async call.
What fixed the issue is that I wrapped the entire initialization of the charts inside Device.BeginInvokeOnMainThread(() => { // charts initi ... } .
Futher more I need to set short await Task.Delay(300) to make it work perfectly. Without this task delay the first chart is still having some issues with the ui rendering.
Rank 1
I would appreciate some help or give me a starting point for how to achieve this styles also on Android OS. I've found something similar in this thread How to remove white boxes surrounding Labels on Telerik but I can't make it work so far.
I'm happy to see you were able to find a solution. Another thing you can try is to make sure the native control is finished loading before assigning data (i.e. RadCartesianChart.NativeControlLoaded event).
Regarding your new question about Android, I've created a new ticket for your follow up question and will reply there as soon as possible (if the original topic of this thread is answered, you can use the "Mark as resolved" button).
Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Rank 1
You're correct that these are somewhat related as they are both using Custom Renderers. However, the interaction logic and approaches needed are very different as they're using fundamentally different native controls (UI for Xamarin.Android and UI for Xamarin.iOS). These control have different development teams and by having separate thread allows me to involve (or escalate to) the different development teams, if necessary.
Another reason to use your Support License instead of forum post is to take advantage of your Priority level. We try our absolute best to monitor and answer all the forum posts, but this can sometimes take a couple days if there are open priority tickets as support tickets take precedence.
By opening a priority ticket for this, I can get you a working solution much sooner as you're at the top of the support queue. You should have received an email with the ticket's link at the top. If you didn't, you can see it on your My Tickets page.
I will reply to the ticket as soon as I'm done building the demo.
Sharing the Demo
If you would like to share the final result with the rest of the community, you can reply to the other forum thread where you asked Stefan for an example but this won't be needed as I'll be writing up a new KB article containing all the renderers (we are going to be introducing a KB section in the documentation in the coming months).
KBs
Although the Xamarin documentation doesn't yet have the infrastructure to search the KBs (coming soon), we have already started writing the articles that will be available and you can see them here on GitHub (also check open Pull Requests for new KBs that haven't been merged yet). You can see what the KB section will look like by taking a look at the Kendo doc's KB section.
I hope this helps explain why I went with a support Ticket instead of extending the forum thread for the Custom Shapes Feature Request.
Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Rank 1
Do you know why the first and the last point of the data are not being rendered on the charts ?
The first and the last data points are not rendered by default on iOS because the TKChartSeriesStyleShapeMode enumeration is set on ShowOnMiddlePointsOnly. In order to show all data points you can access the ShapeMode from the TKChartSeries using series.Style.ShapeMode variable and explicitly set the TKChartSeriesStyleShapeMode to be AlwaysShow. This can be achieved using the code below:
series.Style.ShapeMode = TKChartSeriesStyleShapeMode.AlwaysShow;Let me know if you have any other questions on this.
Regards,
Didi
Progress Telerik
Rank 1
Sorry for asking few years after but i have a little issue.
When my page finish loading i dont see data points on Spline chart until i click on it. When i click on it then i see all data points but before click there are only boxes with values for data point.
Do you know maybe what is the issue?
public override TKChartPointLabel LabelForDataPoint(TKChart chart, TKChartData dataPoint, string propertyName, TKChartSeries series, nuint dataIndex)
{
TKChartDataPoint point = (TKChartDataPoint)dataPoint;
series.Style.PointShape = new TKPredefinedShape(TKShapeType.Circle, new SizeF(7, 7));
var palette = new TKChartPalette();
var firstFill = new TKSolidFill(new UIColor(red: 0.82f, green: 0.38f, blue: 0.01f, alpha: 1.00f));
palette.AddPaletteItem(new TKChartPaletteItem(firstFill));
var seccondFill = new TKSolidFill(new UIColor(red: 0.27f, green: 0.27f, blue: 0.27f, alpha: 1.00f));
palette.AddPaletteItem(new TKChartPaletteItem(seccondFill));
var thirdFill = new TKSolidFill(new UIColor(red: 0.60f, green: 0.60f, blue: 0.60f, alpha: 1.00f));
palette.AddPaletteItem(new TKChartPaletteItem(thirdFill));
var fourthFill = new TKSolidFill(new UIColor(red: 0.27f, green: 0.39f, blue: 0.48f, alpha: 1.00f));
palette.AddPaletteItem(new TKChartPaletteItem(fourthFill));
var fifthFill = new TKSolidFill(new UIColor(red: 0.44f, green: 0.47f, blue: 0.27f, alpha: 1.00f));
palette.AddPaletteItem(new TKChartPaletteItem(fifthFill));
series.Style.PaletteMode = TKChartSeriesStylePaletteMode.UseItemIndex;
series.Style.ShapePalette = palette;
series.Style.ShapeMode = TKChartSeriesStyleShapeMode.AlwaysShow;
return new TKChartPointLabel(point, series, string.Empty);
}
/// <summary>
/// Palettes the item for series.
/// </summary>
/// <param name="chart">The chart.</param>
/// <param name="series">The series.</param>
/// <param name="index">The index.</param>
/// <returns>The palette item</returns>
public override TelerikUI.TKChartPaletteItem PaletteItemForSeries(TelerikUI.TKChart chart, TelerikUI.TKChartSeries series, nint index)
{
return this.originalDelegate.PaletteItemForSeries(chart, series, index);
}
XAML:
<CustomControls:ChartLineControl
x:Name="Chart"
Margin="0"
BindingContextChanged="LineChart_BindingContextChanged"
HeightRequest="{StaticResource ChartHeight}"
IsEnabled="True">
<telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:NumericalAxis
x:Name="horizontalAxis"
LabelFontSize="9"
LabelFormatter="{StaticResource DanishFormatter}"
LineColor="Gray"
ShowLabels="True" />
</telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:CategoricalAxis
LabelFitMode="MultiLine"
LabelFontSize="9"
MajorTickThickness="0"
PlotMode="OnTicks"
ShowLabels="True" />
</telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:RadCartesianChart.Grid>
<telerikChart:CartesianChartGrid
MajorLineColor="#D9D9D9"
MajorLineThickness="1"
MajorLinesVisibility="Y" />
</telerikChart:RadCartesianChart.Grid>
</CustomControls:ChartLineControl>
Hello Stefan,
There's really no way to tell what's going wrong from just that code alone. It suspect it's higher up in the custom control designation and layout choices.
Please take the following step so that we can assist:
- Go to My Account | Get Support
- Select Telerik UI for Xamarin > Chart and open a new support ticket
- Prepare the code so that we can reproduce the problem
- Visual Studio 2019 > File > New Project... > select Telerik Xamarin UI project template
- Select only the iOS project and complete project generation
- (this step is critical) Add your code and run it to confirm the problem is reproduced at runtime
- Close VS2019, delete the bin and obj folder from every project and ZIP up the solution.
- Attach that ZIP to the ticket and send it to us
We will see the case come in and we'll get back to you within the ticket's timeframe (usually less than 24 hours).
Regards,
Lance | Manager Technical Support
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Hi Lance,
Unfortunately that is not possible because it application that need login from company so its not possible to log in.
All i can give is code but i couldnt find that anyone had similar problem. Probably is something related with my delegate but im not sure what. Thank you anyway for your help and sorry again for writing here after 2 years. With best regards,
Hello Stefan,
If you are the developer using Telerik product, you must have a license assigned to you. This is because our licensing is per-user and cannot be shared with more than one person.
It is very common that a company or client actually purchases the license, but the developer is someone else. It is also common that a company will accidently violate the license agreement by creating a "developers@company.com" or "it@company.com" email address and share the login credential for that account.
In your case, it sounds like they downloaded the assemblies and shared them with you because you don't have your own login. Don't worry, I have a fast and easy fix for you.
Fast Solution - Assigning Developer
We created an easy self-service portal for them to assign the license to you. Ask your company to take the following steps (it literally takes less than 1 minute):
- Log into their account and go to the Manage Licensed Users portal
- Click "Add Developer" button (top-left) and enter your information (using your work email)
- Expand the license and click "Remove" next to the current licensed user
- Click the newly appeared "Assign developer to license", then select you from the list
That's it, your account will now have the license assigned and you can continue developing with the product and open priority support tickets!
Important Note: Although the company removed themselves as the user in step #3, they still own the license and can re-assign the user again at any time.
Further Assistance
Please don't feel the need to apologize that this thread is a couple years old :) That is one of the great advantages of a public forum, knowledge and experience can be shared over longer spans of time.
However, in your case, it is highly likely a custom-implementation-specific problem that requires direct attention in a support ticket rather than a public thread (especially if you want to keep your proprietary code private).
Next steps
In the hopes that I can save you some time, I have gone ahead and created the blank project (attached) for you to get started.
After your company assigns you the license, you will be able to open a ticket using the instructions in my previous reply.
Regards,
Lance | Manager Technical Support
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.