SecondaryAxis label override

Thread ID:	Created:	Updated:	Platform:	Replies:
141656	Dec 25,2018 06:48 PM UTC	Dec 27,2018 03:47 AM UTC	Xamarin.Forms	1

Subscribe to this post

Tags: SfChart

Jørgen

Asked On December 25, 2018 06:48 PM UTC

I'm trying to manipulate the secondary axis labels with the chart.SecondaryAxis.LabelCreated event. I only need to show one emoji at zero and one at the maximum.

That works fine in theory, but the chart control is skipping labels based on what fits in the screen and there seems no way to manipulate this (even if all the others are empty strings, it probably still displays them even tho they visually don't take space).

I tried EdgeLabelsVisibilityMode and EdgeLabelsDrawingMode but they seem not to have any effect. Maybe they are not for these labels or this functionality is not working.

Does anyone have an idea how I can hack a emoji in the top left of the chart?

Attached a screenshot of what I need.

Attachment: Screenshot_20181225_19.47.17.jpg_ac109259.zip

Reply | Reply with quote

Michael Prabhu M [Syncfusion]

Replied On December 27, 2018 03:47 AM UTC

Hi Jorgen Teunis,

Greetings from Syncfusion, we have analyzed your requirement to add an emoji in the axis label at position zero(minimum) and maximum. We can achieve your requirement using ViewAnnotation in the ChartAnnotation and ActualRangeChanged event of the SecondaryAxis.

Please refer the below code snippet.

CodeSnippet[XAML]:

<chart:SfChart.ChartAnnotations>

<chart:ViewAnnotation x:Name="emoji1" CoordinateUnit="Pixels" X1="0" Y1="0" />

<chart:ViewAnnotation x:Name="emoji2" CoordinateUnit="Pixels" X1="0" Y1="0"/>

</chart:SfChart.ChartAnnotations>

CodeSnippet[C#]:

Image image1 = new Image() { WidthRequest = 20, HeightRequest = 20 };

image1.Source = "emoji1.png";

image1.Aspect = Aspect.AspectFit;

Image image2 = new Image() { WidthRequest = 20, HeightRequest = 20 };

image2.Source = "emoji.jpg";

image2.Aspect = Aspect.AspectFit;

emoji1.View = image1;

emoji2.View = image2;

private void SecondaryAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e)

{

emoji1.X1 = 20;

emoji1.Y1 = Chart.ValueToPoint(sender as NumericalAxis, (double)e.ActualMinimum);

emoji2.X1 = 20;

emoji2.Y1 = Chart.ValueToPoint(sender as NumericalAxis, (double)e.ActualMaximum);

}

And we have prepared a sample for your requirement and you can download the sample from the below link.

Sample: EmojiAxisLabel

Screenshot:

Please refer the ug document for reference:

https://help.syncfusion.com/xamarin/sfchart/chartannotation?cs-save-lang=1&cs-lang=csharp#view-annotation

Note: We have provided solution for Android and iOS in the sample above, for UWP please follow up on the incident created by you regarding this.

Thanks,

Michael

Reply | Reply with quote

CONTACT US

SecondaryAxis label override

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US