Allow customers to set rotation of the labels of the separate bars in a similar manner as their format.
Lance | Technical Support Engineer, Principal
Posted on:23 Jul 2019 15:45
Although there is no official feature for this in the Xamarin.Forms API, you could override the label drawing method to use custom native platform development techniques. At this point, you can draw your own custom label any way you see fit.
Although custom app development falls outside the scope of Telerik Support, I can make an exception to help you get started. You'll find a demo attached that give you the exact result on iOS, but on Android you'll need to finish up the rotation.
First, let me walk you through the important concepts, then explain the demo.
The first thing to understand is how to access the native chart in a Xamarin.Forms application. One way to do this is to create custom renderer classes in each platform project. This tells the Xamarin.Forms code to use your custom drawing code instead of the default style. This documentation article shows how to register a custom renderer for the Chart - Register Chart Renderers.
That being said, Instead of custom renderers, I personally prefer using Xamarin.Forms Effects instead because the code is cleaner and you have more control over where to apply the customization. Let me share that approach and a demo that show your how to accomplish customization via Effect.
Xamarin.Forms Platform and Routed Effect
If you're not familiar with using Platform Effects, read the following Xamarin.Forms Effects Microsoft Documentation tutorials first.
I have a demo on GitHub that shows how to use an Effect to set custom labels here: CustomXamarinDemos - Custom Series Labels. That demo doesn't use a bar series however, but it will give you a huge head start by showing you how to set up the Effect classes and access the label rendering methods.
Now that you have access to the native platform chart control (via Effect or Custom Renderer), you can begin to override the native label rendering methods. These articles explain how to override the label rendering on the native platforms:
If you've already looked at the classes from my custom demo on GitHub, you'll see the approaches mentioned in those two articles implemented inside the Effects classes. This is where you can apply your custom visualization for BarSeries instead of a SplineSeries.
Bar Series - Headstart Demo
To help you get started and to help understand the structure, I've prepared a custom demo for you (find it attached). Below are my explanations for both platforms.
In the attached demo, I show you how to get the label at precisely the middle of the bar, with 10% padding on the left and right. I've broken out the logic into many variables so that it is easier to follow what is happening and how the calculations are performed.
Here's a screenshot.
The remaining thing is to rotate the canvas at the right position (this is the hard part). It can be done using canvas.Rotate(), but you'll need to calculate the center position, rotate, draw the text, then unrotate. This is not a trivial task and will take some experimentation (I recommend using breakpoints in the label method to see the canvas values).
If you're not familiar with using Xamarin.Android Canvas, there are a lot of StackOverflow posts on the topic (e.g. "how to rotate text in Xamarin Android canvas). There's this particularly good one where a developer rotates text in a pie chart to match the slice angle. this is where you can get hints on using center of rotation (you can convert Java to C# by usually just changing capitalization).
In iOS it's a lot easier because you don't need to rely solely on custom platform code as we have a properties on the label style object. For this, I was able to get exactly what you're looking for.
series.Style.PointLabelStyle.LabelOffset = new UIOffset(horizontalOffset, verticalOffset);
Here's a screenshot at runtime:
Until we've implemented this feature officially, it will take some experimentation to get your desired outcome due to the custom nature of the approach. If this is an absolute must-have, we do have partners that will build it for you. Go to Professional Services - Feature Customization to contact them.
I hope my demo gives you a good head start towards your goal.
Lance | Technical Support Engineer, Principal
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Telerik Feedback Portal
and vote to affect the priority of the items