1. Home
  2. Forum
  3. Xamarin.Forms
  4. Custom x axis

Custom x axis

Greeting, sync team!
I recently acquired the license for xamarin forms tools and so far is perfect but I'm wondering if  there's a way to create a custom x label like I show in the attached image.
In short I want to create a custom primary axis with a group of 4 labels with a custom interval of minutes between labels and the last label to show the text "Now".
Is this possible? 
Thanks beforehand.
Kind regards.

Attachment: customxaxis_a8daa9c.zip

5 Replies
SJ Suyamburaja Jayakumar Syncfusion Team December 8, 2020 11:03 AM UTC

   
Greetings from Syncfusion.  
   
We would like to let you know that your requirement has been achieved by using the axis LabelCreated Event which is triggered when the axis label is created. 
 
XAML: 
<chart:SfChart x:Name="ChartControl" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" > 
                <chart:SfChart.PrimaryAxis> 
                    <chart:DateTimeAxis x:Name="XAxis" LabelCreated="XAxis_LabelCreated"> 
                    chart:DateTimeAxis> 
                chart:SfChart.PrimaryAxis> 
            chart:SfChart> 
 
C#: 
private void XAxis_LabelCreated(object sender, Syncfusion.SfChart.XForms.ChartAxisLabelEventArgs e) 
        { 
            DateTimeAxis dateTimeAxis = (DateTimeAxis)sender; 
            if ((viewModel.SeriesData.Count - 1) == i) 
            { 
                e.LabelContent = "Now"; 
                i = 0; 
            } 
            else 
            { 
                i++; 
            } 
        } 
 
 
 
Screenshot: 

 
Please let us know if you need any further assistance. 
 
Regards, 
Suyamburaja J. 


JV Jorge Valenzuela December 8, 2020 09:47 PM UTC

The example works nice but I'm wondering, is there a way to programmatically create the amount of PrimaryAxis labels that I need? Just for putting an example, if I define an interval type in hours of 1 and I have four points with the same hour but different minutes, there's only one label displayed.

DateTime dateTime = new DateTime(2020, 12, 8, 10, 00, 0);
            var readings = new List<HealthResourcePointModel>();
            readings.Add(new HealthResourcePointModel() 
            {
                Date = dateTime,
                Value = 75
            });
            readings.Add(new HealthResourcePointModel()
            {
                Date = dateTime.AddMinutes(5),
                Value = 200
            });
            readings.Add(new HealthResourcePointModel()
            {
                Date = dateTime.AddMinutes(10),
                Value = 125
            });
            readings.Add(new HealthResourcePointModel()
            {
                Date = dateTime.AddMinutes(15),
                Value = 255
            });
 

Attachment: x_axis_one_label_f3aab87c.zip

SJ Suyamburaja Jayakumar Syncfusion Team December 9, 2020 12:59 PM UTC

 
Query: if I define an interval type in hours of 1 and I have four points with the same hour but different minutes, there's only one label displayed. 
 
For the information, if you set the interval type as Hours and interval is 1 then the interval is calculated 1-hour difference (Example 10.00. 11.00, 12.00, etc..) But you are setting interval is in 1 hour and data points are in 5 minutes difference, so only one label is displayed. If you want to visible all labels, set the interval type in minutes, or set the auto interval.  
   
your requirement is to display the last primary axis label display as “Now". You can achieve your requirement by overriding the DateTime axis and visible label collection to set the last label to “Now”, please refer to the below code snippet. 
 
XAML: 
<chart:SfChart x:Name="ChartControl" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" > 
                <chart:SfChart.PrimaryAxis> 
                    <local:ChartAxisExt x:Name="XAxis" EdgeLabelsVisibilityMode="AlwaysVisible" EdgeLabelsDrawingMode="Fit" > 
                    </local:ChartAxisExt> 
                </chart:SfChart.PrimaryAxis>  
" /> 
                </chart:SfChart.Series> 
            </chart:SfChart> 
 
C#: 
public class ChartAxisExt : DateTimeAxis 
    { 
        protected override void OnCreateLabels() 
        { 
            base.OnCreateLabels(); 
            VisibleLabels[VisibleLabels.Count - 1].LabelContent = "Now"; 
        } 
    } 
 
 
Screenshot: 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Suyamburaja J. 


JV Jorge Valenzuela December 10, 2020 07:16 AM UTC

This works for me.
Thank  you very much for your assitance.
Best regards.

HM Hemalatha Marikumar Syncfusion Team December 11, 2020 06:39 AM UTC

Hi Jorge Valenzuela, 
 
Thanks for your update.  
 
Please let us know if you need any further assistance. 
 
Regards,
Hemalatha M. 


Loader.
Up arrow icon