NativeScript & Vue.JS

Chart Axes Labels

If you followed the getting started article, you now know how to create a chart and add it to a NativeScript page. In this article, you will learn how to control the axes labels and customize their appearance.

Styling with Axes Properties

All axes have properties which provide various customization options for the labels:

  • labelTextColor - Determines the color of the axis' labels.
  • labelSize - Determines the text size of the axis' labels.
  • labelFormat - Determines the format used to display the axis' labels. For example to format values to one symbol after decimal point and append the text seconds, you can use the following format: %.1f seconds.
  • labelMargin - Determines the margin for the labels. The margin is a single number value and determines the number of device independent pixels between a label and its corresponding axis tick.
  • labelRotationAngle - Determines the angle of rotation for labels. Used only when labelFitMode property has a value of Rotate.
  • labelFitMode - Determines the strategy used in attempt to fit the labels. The default value is None which means the labels are positioned on single line but there are Multiline and Rotate options too.
  • labelLayoutMode - Determines the layout mode for axis labels. With this property you can position labels in the Inner or Outer side of chart.

Styling with CSS

The easiest option to style all of the labels for the series of a chart is to use the label's CSS type selector - ChartAxisLabel. Here's the list of values that are supported:

  • color - The color used for the text of the labels.
  • background-color - The color used for the background of the label.
  • border-color - The color used for the background of the label. Note that the labels only support a single value that is applied for the border of its four sides.
  • border-width - The width used for the background of the label. Note that the labels only support a single value that is applied for the border of its four sides.
  • margin - A single numeric value representing the device independent pixels between the label and the related axis tick.
  • padding - The space between the label's text and its border.
  • font-related properties (font-size, font-family, etc.)
  • format - The format used to display the axes' labels. For example to format values to one symbol after decimal point and append the text seconds, you can use the following format: %.1f seconds.
  • rotation-angle - Used just line CartesianAxis's labelRotationAngle property.
  • fit-mode - Used just line CartesianAxis's labelFitMode property.
  • layout-mode - Used just line CartesianAxis's labelLayoutMode property.

Example 1: Apply axes label styles through css

ChartAxisLabel {
    color: #3C4044;
    format: "%.0f";
    margin: 12;
    layout-mode: outer;
}

References

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

Examples used in this article:

Related articles you might find useful:

Ask the community Improve this article