Xuni Product Documentation - Xamarin.Forms
Axis Label Formatter
Xuni Controls > FlexChart > Features > Axis Label Formatter

The FlexChart's axis label formatter allows users to customize the axis label format beyond the capabilities of standard format strings. With the LabelLoading event, a user can display customized annotations on the axis, such as images, icons, text, or symbols. This optimizes the use of screen space, enabling users visualize the chart data clearly.

This following sections demonstrate how to customize the X and Y axis of the FlexChart using axis label formatter:

Customizing Y-Axis to display numbers on the label in abbreviated form

For axes labels with long numeric strings, you can use axis label formatting to abbreviate long numeric representations. To illustrate the feature, this example uses a custom format, that is writing K in place of '000 to represent a thousand. This lets users plot label values with 6 or more figures easily on the mobile screen without taking much of the screen space.

Customizing X-Axis to display Images

Let us take another scenario, where we have sales and expenses data for six countries. The user wants to display the flags of these countries instead of their names to make it more interactive and easy to understand. You can customize the axis using FlexChart's axis label formatting.

The country icons displayed on the X-axis of the FlexChart below are .png image files added under Images folder of the Visual Studio project. These country flags are available in Xuni | Samples folder. You can use images/icons of your choice as well.

This example uses the sample created in the Quick Start section but with some changes in the data source, and an additional FlagConverter class added to convert the items appearing on the X-axis into images.

The image given below shows customized labels on X- and Y-axis using the axis label formatting in the FlexChart control.

Step 1: Create a Data Source for FlexChart and Add Image Resources

  1. In the Solution Explorer, right-click your project name.
  2. Select Add | New Item. The Add New Item dialog appears.
  3. Choose Class from the dialog and provide a name to the class, for example, FlexChartDataSource.
  4. Click Add to add the class in your project.
  5. Add the code below to the FlexChartDataSource class. The code given below displays Sales and Expenses for 6 different countries in the FlexChart.
    C#
    Copy Code 
     public class FlexChartDataSource
    {
        private List<Country> appData;

        public List<Country> Data
        {
            get { return appData; }
        }

        public FlexChartDataSource()
        {
            // appData
            appData = new List<Country>();
            var countryName = "US,Japan,UK,Germany,Italy,Greece".Split(',');
            var salesData = new[] { 5000, 8500, 7000, 6500, 12000, 14800, 18500, 7500, 6500, 13000, 20000, 9000 };
            var downloadsData = new[] { 6000, 7500, 12000, 5800, 11000, 7000, 16000, 17500, 19500, 13250, 13800, 19000 };
            var expensesData = new[] { 15000, 18000, 15500, 18500, 11000, 16000, 8000, 7500, 6500, 6000, 13500, 5000 };
            for (int i = 0; i < 6; i++)
            {
                Country tempCountry = new Country();
                tempCountry.Name = countryName[i];
                tempCountry.Sales = salesData[i];
                tempCountry.Downloads = downloadsData[i];
                tempCountry.Expenses = expensesData[i];
                appData.Add(tempCountry);

            }
        }
    }

    public class Country
    {
        string _name;
        long _sales, _downloads, _expenses;

        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }

        public long Sales
        {
            get { return _sales; }
            set { _sales = value; }
        }

        public long Downloads
        {
            get { return _downloads; }
            set { _downloads = value; }
        }
        public long Expenses
        {
            get { return _expenses; }
            set { _expenses = value; }
        }
    }
  6. Create a new class named FlagConverter and add it to your project by following the steps mentioned above.
  7. Add the code given below to the FlagConverter class. The FlagConverter class implements IValueConverter interface to convert the items appearing on the X-axis into images.
    C#
    Copy Code 
    public class FlagConverter : IValueConverter
        {
            private static ImageSource us = ImageSource.FromResource("FlexChartApp.Images.US.png");
            private static ImageSource germany = ImageSource.FromResource("FlexChartApp.Images.Germany.png");
            private static ImageSource uk = ImageSource.FromResource("FlexChartApp.Images.UK.png");
            private static ImageSource japan = ImageSource.FromResource("FlexChartApp.Images.Japan.png");
            private static ImageSource italy = ImageSource.FromResource("FlexChartApp.Images.Italy.png");
            private static ImageSource greece = ImageSource.FromResource("FlexChartApp.Images.Greece.png");
            public object Convert(object value, Type targetType,
                                  object parameter, CultureInfo culture)
            {
                if (value != null)
                {
                    String flag = value.ToString().ToUpper();

                    switch (flag)
                    {
                        case "US":
                            return us;

                        case "UK":
                            return uk;

                        case "GERMANY":
                            return germany;

                        case "JAPAN":
                            return japan;

                        case "ITALY":
                            return italy;

                        case "GREECE":
                            return greece;

                    }
                }

                return us;
            }

            public object ConvertBack(object value, Type targetType,
                                      object parameter, CultureInfo culture)
            {
                return us;
            }
        }
  8. Set the Build Action for all the image files to Embedded Resource from the Properties Window to render the images/icons onto the device as illustrated in the image below.

Step 2: Use LabelLoading Events to customize the format of axis labels

  1. To customize the format for Y-axis labels, add the AxisX_LabelLoading and AxisY_LabelLoading handlers in the GetChartControl method.
    C#
    Copy Code 
    //add LabelLoading event handler for X and Y-axis
chart.AxisX.LabelLoading += AxisX_LabelLoading;
chart.AxisY.LabelLoading += AxisY_LabelLoading;
  2. Add the following code in the LabelLoading events to format the labels on X-axis and Y-axis.
    C#
    Copy Code 
    //formatting the labels on X and Y-axis
static void AxisX_LabelLoading(object sender, LabelLoadingEventArgs e)
   {
      FlagConverter flagConverter = new FlagConverter();
      Image img = new Image();
      ImageSource src = flagConverter.Convert(e.Text, typeof(ImageSource), null, CultureInfo.CurrentUICulture) as ImageSource;
      img.Source = src;
      e.Label = img;
   }

static void AxisY_LabelLoading(object sender, LabelLoadingEventArgs e)
   {
      Label label = new Label();
      label.Text = string.Format("{0}K", e.Value / 1000);
      Device.OnPlatform(Android: () => label.FontSize = 7);
      e.Label = label;
    }
  3. Press F5 to run the application.

 

 

Copyright © GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback