1. Home
  2. Forum
  3. Xamarin.Forms
  4. Axis Labels

Axis Labels

I would like to format the labels for the Y-Axis so that they show 200k instead of 200000. I make the chart with the mvvm design pattern so I am unsure on how to do this. Another thing i would like to do is show an annotation when the x-axis label is tapped. Is this possible?
Thanks

5 Replies
DV Divya Venkatesan Syncfusion Team June 13, 2018 07:20 AM UTC

Hi Caleb, 
  
Thanks for using Syncfusion products. 
  
Query 1: I would like to format the labels for the Y-Axis so that they show 200k instead of 200000. 
We have achieved your requirement using LabelCreated event of axis as shown in the below code snippets. 
  
Code snippet for hooking LabelCreated event [Xaml]: 
<chart:SfChart.SecondaryAxis> 
    <chart:NumericalAxis LabelCreated="NumericalAxis_LabelCreated"/> 
</chart:SfChart.SecondaryAxis> 
 
  
Code snippet for hooking LabelCreated event [C#]: 
numericalAxis.LabelCreated += NumericalAxis_LabelCreated; 
 
  
Code snippet of LabelCreated event [C#]: 
private void NumericalAxis_LabelCreated(object sender, ChartAxisLabelEventArgs e) 
{ 
    e.LabelContent = Convert.ToDouble(e.LabelContent) / 1000 + "k"; 
} 
 
  
Please refer the following user guide link to know more about LabelCreated event. 
  
Query 2: Another thing i would like to do is show an annotation when the x-axis label is tapped. Is this possible? 
Your requirement can be achieved by using LabelClicked event of axis. Please refer the below code snippets. 
  
Code snippet for hooking LabelClicked event [Xaml]: 
<chart:SfChart.PrimaryAxis> 
    <chart:CategoryAxis LabelClicked ="CategoryAxis_LabelClicked"/> 
</chart:SfChart.PrimaryAxis> 
 
  
Code snippet for hooking LabelClicked event [C#]: 
categoryAxis.LabelClicked += CategoryAxis_LabelClicked; 
 
  
Code snippet of LabelClicked event [C#]: 
private void CategoryAxis_LabelClicked(object sender, LabelClickedEventArgs e) 
{ 
    var annotation = new EllipseAnnotation(); 
    annotation.X1 = e.Position; 
    annotation.Y1 = viewModel.Data[(int)e.Position].YValue; 
    annotation.Height = 20; 
    annotation.Width = 20; 
    Chart.ChartAnnotations.Clear(); 
    Chart.ChartAnnotations.Add(annotation); 
} 
 
  
You can refer the following user guide link to know more about LabelClicked event and annotations 
  
We have prepared a sample for this which can be downloaded from the following link. 
  
  
Please let us know if you have any queries. 
  
Regards, 
Divya Venkatesan 
 


CK Caleb Kliewer June 25, 2018 04:13 PM UTC

Thank you! Is there also a way to do this for tool tips instead of annotations?

DV Divya Venkatesan Syncfusion Team June 27, 2018 03:49 AM UTC

Hi Caleb, 
  
We have modifed the sample to show tooltip on clicking axis by using Show method of ChartTooltipBehavior in Android and iOS. Please refer the below code snippets. 
  
Code snippet[C#]: 
private async void CategoryAxis_LabelClicked(object sender,LabelClickedEventArgs e) 
{ 
       var dataPoint = viewModel.Data[(int)e.Position] as Model; 
       float xPoint = (float)Chart.ValueToPoint(Chart.PrimaryAxis, (int)e.Position); 
    float yPoint = (float)Chart.ValueToPoint(Chart.SecondaryAxis, dataPoint.YValue); 
  
    await Task.Delay(500); 
    if (Device.RuntimePlatform != Device.UWP) 
    { 
        tooltipBehavior.Show(xPoint, yPoint, true); 
    } 
    else 
        DependencyService.Get<IChartDependencyService>().ShowTooltip(Chart, tooltipBehavior, dataPoint); 
} 
  
Note: Please add the ChartTooltipBehavior as shown in the below code snippet. 
  
Code snippet[Xaml]: 
<chart:SfChart.ChartBehaviors> 
    <chart:ChartTooltipBehavior x:Name="tooltipBehavior" /> 
</chart:SfChart.ChartBehaviors> 
  
Code snippet[C#]: 
ChartTooltipBehavior tooltipBehavior = new ChartTooltipBehavior(); 
Chart.ChartBehaviors.Add(tooltipBehavior); 
  
For UWP, we have achieved your requirement using DependencyService as shown in the below code snippets. 
  
Code snippet[ChartDependencyService.cs file]: 
public class ChartDependencyService : IChartDependencyService 
{ 
    public void ShowTooltip(SfChart chart, ChartTooltipBehavior tooltip, ModeldataPoint) 
    { 
        var property = typeof(ChartTooltipBehavior).GetProperty("NativeObject",BindingFlags.Instance | BindingFlags.NonPublic); 
  
        var nativeChart = SfChartRenderer.GetNativeObject(typeof(SfChart), chart) as Native.SfChart; 
  
        Native.CartesianSeries series = nativeChart.Series[0] asNative.CartesianSeries; 
  
        var index = (series.ItemsSource as List<Model>).IndexOf(dataPoint); 
        var xPoint = nativeChart.ValueToPoint(nativeChart.PrimaryAxis, index); 
        var yPoint = nativeChart.ValueToPoint(nativeChart.SecondaryAxis, dataPoint.YValue); 
  
        FieldInfo fieldInfo = series.GetType().GetField("mousePos",BindingFlags.NonPublic | BindingFlags.Instance); 
        fieldInfo.SetValue(series, new Windows.Foundation.Point(xPoint + nativeChart.SeriesClipRect.Left, yPoint)); 
  
        var data = new TooltipModel() { XData = dataPoint.XValue, YData = dataPoint.YValue }; 
        MethodInfo info =typeof(Native.ChartSeriesBase).GetMethod("UpdateSeriesTooltip",BindingFlags.NonPublic | BindingFlags.Instance); 
        info?.Invoke(series, new object[] { data }); 
        tooltip.BackgroundColor = chart.Series[0].Color; 
    } 
} 
  
Please download the sample from the following link. 
  
  
Please let us know if you need any further assistance. 
  
Regards, 
Divya Venkatesan 
 


CK Caleb Kliewer July 5, 2018 03:17 PM UTC

I've implemented this and nothing happens when I click. When I debug I see the code is executing correctly. It gets the correct object and gets an x and y value. If I just display a message using "Display Alert" it appears but the tooltip does not. Any idea why?

MP Michael Prabhu M Syncfusion Team July 6, 2018 09:18 AM UTC

Hi Caleb Kliewer, 
 
We suspect that the EnableTooltip property in series is not set to True. So please set this property as shown below.  
Code snippet [XAML]:   
<chart:SfChart.Series> 
            <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"   EnableTooltip="True" Color="LightBlue"/> 
</chart:SfChart.Series> 
  
Code snippet [C#]:    
ColumnSeries columnSeries = new ColumnSeries(); 
columnSeries.ItemsSource = viewModel.Data; 
columnSeries.XBindingPath = "XValue"; 
columnSeries.YBindingPath = "YValue"; 
columnSeries.EnableTooltip = true; 
columnSeries.Color = Color.LightBlue; 
Chart.Series.Add(columnSeries); 
 
If this does not solve your issue, can you revert us with a sample to replicate the issue? So that it will help us to provide you a better solution at the earliest. 
Thanks, 
Michael 


Loader.
Up arrow icon