Gauge Axis

The axis is a gauge element that is used to control everything related to the display of the axis. This includes ticks, labels, appearance and axis range.

Namespaces

You may need the following namespaces for the examples below:

xmlns:telerikCommon="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common"
xmlns:telerikGauges="clr-namespace:Telerik.XamarinForms.DataVisualization.Gauges;assembly=Telerik.XamarinForms.DataVisualization"
using Telerik.XamarinForms.Common;
using Telerik.XamarinForms.DataVisualization.Gauges;

Axis Range

Presently, the axis does not have an auto-range mechanism so it is mandatory that you set Minimum, Maximum and Step.

<telerikGauges:GaugeLinearAxis Minimum="0"
                               Maximum="4"
                               Step="0.5" />

Appearance

You can control the stroke of the axis line and ticks via the Stroke property. If you need to have a different color for the ticks you need to set the TickStroke property. Similarly, setting the StrokeThickness affects both the axis line and ticks. If you need ticks with a different stroke thickness you need to set the TickThickness property.

<telerikGauges:GaugeLinearAxis Minimum="0"
                               Maximum="4"
                               Step="0.5"
                               Stroke="#FFDD789B"
                               StrokeThickness="1"
                               TickStroke="#FFAAC271"
                               TickThickness="2"
                               TextColor="#FF4062AD" />

Gauge example

Font Style

You can control the appearance of the labels via the FontSize, FontFamily and FontAttributes properties.

<telerikGauges:GaugeLinearAxis Minimum="0"
                               Maximum="4"
                               Step="0.5"
                               FontSize="30"
                               FontAttributes="Bold" />

FontFamily

Note that the FontFamily property is of type string and you need to pass the name of the font family. Remember that the different platforms work with different fonts so you may need to use the OnPlatform method.

<telerikGauges:GaugeLinearAxis Minimum="0"
                               Maximum="4"
                               Step="0.5">
  <telerikGauges:GaugeLinearAxis.FontFamily>
    <OnPlatform x:TypeArguments="x:String">
      <OnPlatform.iOS>Helvetica</OnPlatform.iOS>
      <OnPlatform.Android>sans-serif-light</OnPlatform.Android>
      <OnPlatform.WinPhone>Comic Sans MS</OnPlatform.WinPhone>
    </OnPlatform>
  </telerikGauges:GaugeLinearAxis.FontFamily>
</telerikGauges:GaugeLinearAxis>

Label Format

You can control the numeric format of the content of the labels. The default label format is "G7".

<telerikGauges:GaugeLinearAxis Minimum="0"
                               Maximum="4"
                               Step="0.5"
                               LabelFormat="N2" />

Gauge example

Label And Tick Position

In the radial gauge, the gauge elements can be positioned on the inside or on the outside of the axis line. Some of the elements, such as the ticks, can also be centered on the axis line. This is controled by the Position property of the concrete element.

<telerikGauges:GaugeLinearAxis Minimum="0"
                               Maximum="4"
                               Step="0.5"
                               TickPosition="Start"
                               LabelPosition="Start" />

Gauge example

Offset And Length

The distance between the concrete element and the axis line is defined by an offset property (Offset, TickOffset, LabelOffset). You can also specify the length of the ticks.

<telerikGauges:GaugeLinearAxis Minimum="0"
                               Maximum="4"
                               Step="0.5"
                               TickOffset="3"
                               TickLength="3"
                               LabelOffset="8" />

See Also