NativeScript Angular

RadGauge Getting Started

This article will guide you through the process of adding a RadRadialGauge instance to a page in a {N} application and adding scales and indicators to it. The code snippets from this section are available as a standalone demo application.

Figure 1. Radial gauge with needle and bar indicators

NativeScriptUI-Getting-Started-iOS NativeScriptUI-Getting-Started-Android


Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-gauge

Adding a RadRadialGauge to your Component

Before proceeding, make sure that the NativeScriptUIGaugeModule from the nativescript-ui-gauge plugin has been imported in an ngModule in your app. For example:

import { NativeScriptUIGaugeModule } from "nativescript-ui-gauge/angular";

    schemas: [NO_ERRORS_SCHEMA],
    imports: [
    declarations: [
export class GaugesExamplesModule { }


To display data the RadRadialGauge instance is not enough. We should add also add a scale with at least on indicator. In this example we are going to add a RadialScale with several RadialBarIndicator instances and one RadialNeedle. To add a scale to the RadRadialGauge we should use its scales property. Adding indicators to the scale is similar - we are using RadialScale's indicators property.

In order to setup an RadRadialGauge in your Component HTML you will need to follow this steps:

  • First start by declaring the <RadRadialGauge></RadRadialGauge> tags
  • The main elements that are visualized by the gauge are its scales, in order to declare multiple scales simply declare the <RadialScale tkRadialGaugeScales></RadialScale> and set the tkRadialGaugeScales inline directive to it. The tkRadialGaugeScales is an custom inline directive that 'links' the RadialScale to the RadRadialGauge.
    <RadialScale tkRadialGaugeScales minimum="0" maximum="6" radius="0.90">
        <ScaleStyle tkRadialScaleStyle majorTicksCount="7" minorTicksCount="9" lineThickness="0" labelsCount="7" ticksOffset="0"></ScaleStyle>

        <RadialBarIndicator tkRadialScaleIndicators minimum="0" maximum="1.2" location="0.97">
            <BarIndicatorStyle tkRadialBarIndicatorStyle fillColor="#dddddd"></BarIndicatorStyle>
        <RadialBarIndicator tkRadialScaleIndicators minimum="1.2" maximum="2.4" location="0.97">
            <BarIndicatorStyle tkRadialBarIndicatorStyle fillColor="#9DCA56"></BarIndicatorStyle>
        <RadialBarIndicator tkRadialScaleIndicators minimum="2.4" maximum="3.6" location="0.97">
            <BarIndicatorStyle tkRadialBarIndicatorStyle fillColor="#F0C44D"></BarIndicatorStyle>
        <RadialBarIndicator tkRadialScaleIndicators minimum="3.6" maximum="4.8" location="0.97">
            <BarIndicatorStyle tkRadialBarIndicatorStyle fillColor="#E27633"></BarIndicatorStyle>
        <RadialBarIndicator tkRadialScaleIndicators minimum="4.8" maximum="6" location="0.97">
            <BarIndicatorStyle tkRadialBarIndicatorStyle fillColor="#A7010E"></BarIndicatorStyle>

        <RadialNeedle tkRadialScaleIndicators value="2"></RadialNeedle>
import { Component } from "@angular/core";

    selector: "tk-gauges-getting-started",
    templateUrl: "gauges-getting-started.component.html"
export class GaugesGettingStartedComponent  {
    constructor() {


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: