Skip to main content Skip to footer

How to Customize Axis Spacing and Values

If you're looking to customize the axis spacing, you can use FlexChart's Formatter property and set its value to an instance of custom axis label formatter as shown in the following code snippet:

public class UserLabelFormatter : ICustomFormatter
{
    public string Format(string? format, object? arg, IFormatProvider? formatProvider)
    {
        if ((double)arg != null)
        {
            // Converting to minutes
            return (((double)arg) / 60d).ToString("F2");
        }
        else return string.Empty;
    }
}

flexChart1.AxisX.Formatter = new UserLabelFormatter();

Then you can use FlexChart's MajorUnit property to set the difference between the axis label values. You can refer the following code of line for the same:

flexChart1.AxisX.MajorUnit = 100;

If you would like a user to choose what label to use on the axis, such as hours or minutes, you can create a constructor in the UserLabelFormatter class that accepts a string argument denoting the time format you want the data labels to be converted to. As the user changes the format type, you can create a new instance of this class with the format type passed into it:

public class UserLabelFormatter : ICustomFormatter
{
    string timeType;
    public UserLabelFormatter(string type)
    {
        this.timeType = type;
    }
    public string Format(string? format, object? arg, IFormatProvider? formatProvider)
    {
        if ((double)arg != null)
        {
            if(timeType == "Hours")
            {
                // Converting to minutes
                return (((double)arg) / 3600d).ToString("F2");
            }
            else if(timeType == "Minutes")
            {
                // Converting to minutes
                return (((double)arg) / 60d).ToString("F2");
            }
            else return string.Empty;
        }
        else return string.Empty;
    }
}