Styling: Axes

Styling the chart axes is done by using the corresponding customization properties exposed by the axes. All axes used in Telerik Chart for NativeScript define the following properties:

  • lineColor - defines the color of the axis' line
  • lineThickness - defines the thickness of the axis' line
  • lineHidden - defines if the axis line is hidden.
  • labelTextColor - defines the color of the axis' labels
  • labelSize - defines the text size of the axis' labels
  • labelFormat - defines the format used to display the axis' labels
  • labelMargin - defines the margin for the labels
  • labelRotationAngle - defines the angle of rotation for labels. Requires Rotate value for labelFitMode property
  • labelFitMode - defines the fit mode for labels. By default labels are positioned on single line but there are Multiline and Rotate options too.
  • labelLayoutMode - defines the layout mode for axis labels. With this property you can position labels in the Inner or Outer side of chart.

For the properties not specified exclusively the default values from the chart palette are used.


To better illustrate the usage of Axis properties, we will use a simple scenario in which the Axes are customized:

<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <LinearAxis tkCartesianHorizontalAxis labelTextColor="Green"></LinearAxis>
    <CategoricalAxis tkCartesianVerticalAxis labelTextColor="#cb4b16" labelSize="10" lineThickness="3" lineColor="Red"></CategoricalAxis>

    <BarSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></BarSeries>

This is how the chart looks like now:
Axis styling Axis styling