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. The default value is
Nonewhich means the labels are positioned on single line but there are
labelLayoutMode- defines the layout mode for axis labels. With this property you can position labels in the
Outerside 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:
<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:
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: