Y axis - as integer

[Daniel]

Hi,

I want the y axis to show integer number not double , how is done ?

Thanks,

  <Label Grid.Row="2" Grid.Column="0" Text="Total Files In Progress" HorizontalOptions="Center" VerticalOptions="Center"/>
            <telerikChart:RadCartesianChart Grid.Row="3" Grid.Column="0" PaletteName="LightSelected" Margin="10" >
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:DateTimeContinuousAxis LabelFitMode="Rotate"
                                           MajorStepUnit="Day"/>
                </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:NumericalAxis LabelFormat="N"
                                   Minimum="0" />
                </telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:RadCartesianChart.Series>
                    <telerikChart:LineSeries 
                               CategoryBinding="Date"
                               ValueBinding="Value"
                               ItemsSource="{Binding TotalFilesInProgressDataSource}" />
                </telerikChart:RadCartesianChart.Series>
                <telerikChart:RadCartesianChart.Grid>
                    <telerikChart:CartesianChartGrid StripLinesVisibility="X"
                                       MajorLinesVisibility="XY"
                                       MajorLineColor="LightGray"
                                       MajorLineThickness="3" />
                </telerikChart:RadCartesianChart.Grid>
            </telerikChart:RadCartesianChart>
             <Label Grid.Row="4" Grid.Column="0" Text="Total Files Divided By Routes" HorizontalOptions="Center" VerticalOptions="Center"/>
            <telerikChart:RadCartesianChart Grid.Row="5" Grid.Column="0" x:Name="totalFilesDividedByRoutesChart" Margin="10">
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:CategoricalAxis PlotMode="OnTicks"/>
                </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:NumericalAxis LabelFitMode="MultiLine" />
                </telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:RadCartesianChart.Series>
                    <telerikChart:BarSeries ValueBinding="Value"
                                    CategoryBinding="RouteName"
                                    ItemsSource="{Binding TotalFilesDividedByRoutesDataSource}" />
                </telerikChart:RadCartesianChart.Series>
                <telerikChart:RadCartesianChart.Grid>
                    <telerikChart:CartesianChartGrid StripLinesVisibility="X"
                                       MajorLinesVisibility="XY"
                                       MajorLineColor="LightGray"
                                       MajorLineThickness="3" />
                </telerikChart:RadCartesianChart.Grid>
            </telerikChart:RadCartesianChart>

[Lance | Manager Technical Support]

Hello Daniel,

Use LabelFormat N0 instead of N. To understand how numerical string formatting works, take a look at this Microsoft documentation => Standard numeric format strings | Microsoft Docs

Note: This will result in seeing two of the same number in your axis because 1.5 will turn into 1 (and you'll see two 1s). You may also want to change the MajorStep to 1 so that it skips the 1.5 tick.

Regards,
Lance | Manager Technical Support
Progress Telerik

[Daniel]

The values are integer(1.2.3....) and not double so your note not relevant. is it ?

[Lance | Manager Technical Support]

Hi Daniel,

If the original values are int, then you don't need to worry about string formatting because none of the values are going to end up on a non whole number. However, you still want to set MajorStep size to 1 so that the axis isn't autocalculated and you get only ticks at whole numbers

Take a look at the NumericalAxis documentation where it explains what MajorStep is .NET MAUI Chart Documentation | Numerical Axis.

[Daniel]

When I set MajorStep size to 1  I don't see the values in axis x because i have 100 points.

[Lance | Manager Technical Support]

Experiment with different MajorStep values that are appropriate for your data. You will need to figure that out based on your data, try 2 or 5 or 10.

I used 1 as an example of a Major step that is a whole number. In your screenshot, it looks like we auto-calculated your data's need to have a 0.5 step based on the maximum and minimum values. You can also set your Minimum to 0 and Maximum to 100 is you want that to be the range of your vertical axis. 

Ultimately, this will take some experimentation on your part to determine what the best axis values are. This is why we do automatic calculations for you. However, if you want to override that calculation, you need to do the work involved with figuring out those ranges.

Converter

as a last case resort, you can leave the default autocalculation enabled and have a custom LabelFormatter that returns a display string that is only a whole number. See https://docs.telerik.com/devtools/maui/controls/chart/axes/axes-overview#label-formatter 

[Daniel]

Regarding LabelFormatter, can you give an example how I set the x axis dynamically using label formatter ?

[Lance | Manager Technical Support]

You can find the code example in the Xamarin docs here https://docs.telerik.com/devtools/xamarin/controls/chart/axes/axes-overview#label-formatter, it uses the same code. I will look into why the MAUI docs is missing that snippet (it should be there).

The only difference between using a formatter on different axes is whatever type that axis is using:

public class MyLabelFormatter : LabelFormatterBase<T>

Examples

For example, for a Datetime formatter T will be a DateTime:

public class DateLabelFormatter : LabelFormatterBase<DateTime>
{
    public override string FormatTypedValue(DateTime value)
    {
        if (value.Day == 1)
        {
            return value.Day + "st";
        }
        else if (value.Day == 2)
        {
            return value.Day + "nd";
        }
        else if (value.Day == 3)
        {
            return value.Day + "rd";
        }
        else
        {
            return value.Day + "th";
        }
    }
}

If the axis is showing an int value, you'd use an int for the type:

public class MyIntLabelFormatter : LabelFormatterBase<int>
{
    public override string FormatTypedValue(int value)
    {
        if (value == 1)
        {
            return "one";
        }
        else
        {
            return "bigger than one";
        }
    }
}

 And so forth. Ultimately, you have full control over whatever string  will be displayed at that axis tick's location.

[Daniel]

When I have two item in the system look on the graph. I used LabelFormat N0 

[Lance | Manager Technical Support]

That is the behavior I was explaining that you can expect and why I recommend using a label formatter to return an empty string for the 2nd duplicate value. If you would like assistance with this, please attach a project that replicates the issue at runtime and I can offer some in-place suggestions.

[Daniel]

Attached sample code.

[Lance | Manager Technical Support]

HI Daniel, as I suspected your project uses double for the Value property, not int. This is why we provide axis values for ticks in between whole numbers.

Change the TotalFilesDividedByRoutesData to an int property and the axis will automatically create the appropriate ticks.

public class TotalFilesDividedByRoutesData
{
...
    // Change this to an int
    public int Value { get; set; }
}

Alternative, Custom Option

Otherwise, you need to write a custom label formatter that only returns the number if the value is divided by 1 evenly (i.e. it is a whole number)

public class WholeNumberLabelFormatter : Telerik.XamarinForms.Chart.LabelFormatterBase<double>
{
    public override string FormatTypedValue(double value)
    {
        if ((value % 1) == 0)
        {
            // If it divides evenly into 1, it is a whole number valu
            // That means you can return the number.
            return value.ToString();
        }
        else
        {
            // otherwise return a blank string
            return "";
        }
    }
}

[Lance | Manager Technical Support]

sorry for the double reply, I forgot to include a screenshot so you can see all the settings (you also forgot to set the MajorStep). Here's what it looks like at runtime:

 

Note: depending on what values you have, sometimes just setting the MajorStep, min and max is all you need. If I use a double for the same example above, I will get the same end result.

[Daniel]

i dont know the major step and max value they depends on values inserted by enduser. Max values can be 100 , 200,1000.....and major steps can't be 1.So how your solution solved it ?

 

[Lance | Manager Technical Support]

Hi Daniel,

We already automatically calculate this for you. However, when you set those values, you're asking to override that automatic calculation because you do not like how it comes out or want more control. Sometimes this automatic calculation requires fractional ticks when the data's max values are too small.

If you want to prevent the automatic calculations, then you need to do all the math involved that we already do internally for you.

To use this simple example, you can use LINQ to look at what the minimum and maximum values are in the user's data:

// Get the lowest value in the data
var lowestValue = TotalFilesDividedByRoutesDataSource.Min(route => route.Value);

// Gets the highest value in the data
var highestValue = TotalFilesDividedByRoutesDataSource.Max(route => route.Value);

Then, you can do your own calculations to pick Maximum. For example, you can make sure that the maximum will not be any less than 5 in this situation.

// Gets the highest value in the data
var highestValue = TotalFilesDividedByRoutesDataSource.Max(route => route.Value);

int myAxisMaximum = 0;

// This will prevent the vertical axis's Maximum from being any lower than 5
if(highestValue < 5)
{
    myAxisMaximum = 5;
}
else
{
    myAxisMaximum = Convert.ToInt32(highestValue);
}

At this point, this is up to you to experiment and design your own algorithm to replace the chart axis's built in one.

Label Formatter is Still An Option

Don't forget about the LabelFormatter option, you can use the auto calculation and remove any label with a fractional value. Just keep in mind that it doesn't remove the tick... you just don't see a label there.

Here's what it looks like at runtime with the "WholeNumgerFormatter" example I gave above: