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.

Example

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

<chart:BarSeries.horizontalAxis>
    <chart:LinearAxis labelTextColor="Green" />
</chart:BarSeries.horizontalAxis>
<chart:BarSeries.verticalAxis>
        <chart:CategoricalAxis labelTextColor="#cb4b16" labelSize="10" lineThickness="3" lineColor="Red"/>
</chart:BarSeries.verticalAxis>

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

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful: