All Components

Scale Options

The RadialGauge enables you to customize the options of the scale.

For example, you can change the start and end angle, the appearance of the label and ticks, customize the ranges, and others. For the full list of options, refer to the API reference of the RadialGauge.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <div class="row">
                <div class="col-sm-12 col-md-3">
                    <label><input type="checkbox" [(ngModel)]="showLabels" /> Show Labels </label>
                </div>
                <div class="col-sm-12 col-md-3">
                    <label><input type="checkbox" [(ngModel)]="showTicks" /> Show Ticks </label>
                </div>

                <div class="col-sm-12 col-md-3">
                    <label> <input type="color" [(ngModel)]="ticksColor" /> Ticks Color</label>
                </div>
                <div class="col-sm-12 col-md-3">
                    <label> <input type="color" [(ngModel)]="labelsColor" /> Labels Color</label>
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="col-sm-12 col-md-6">
                    <label> <input type="number" [(ngModel)]="rangeSize" min="1" max="30" /> Range Size</label>
                </div>
                <div class="col-sm-12 col-md-6">
                    <label><input type="color" [(ngModel)]="rangePlaceholderColor" /> Range Placeholder Color</label>
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="col-sm-12 col-md-6">
                    <label> <input type="range" min="-90" max="90" [(ngModel)]="startAngle" style="vertical-align:middle;" />
                        tart angle
                    </label>
                </div>
                <div class="col-sm-12 col-md-6">
                    <label><input type="range" min="90" max="270" [(ngModel)]="endAngle"  style="vertical-align:middle;" />
                        End angle
                    </label>
                </div>
            </div>
            <hr />
            <label><input type="checkbox" [(ngModel)]="reverse" /> Reverse </label>
        </div>
        <kendo-radialgauge [pointer]="[{ value: 30 }]" [transitions]="false" style="display:block;height:250px;">
          <kendo-radialgauge-scale
                [majorTicks]="{ visible: showTicks, color: ticksColor }"
                [minorTicks]="{ visible: showTicks, color: ticksColor }"
                [reverse]="reverse"
                [startAngle]="startAngle"
                [endAngle]="endAngle"
                [rangePlaceholderColor]="rangePlaceholderColor"
                [rangeSize]="rangeSize">
            <kendo-radialgauge-scale-labels format="c" [color]="labelsColor" [visible]="showLabels">
            </kendo-radialgauge-scale-labels>
            <kendo-radialgauge-scale-ranges>
                <kendo-radialgauge-scale-range [from]="0" [to]="50" color="#ff6358">
                </kendo-radialgauge-scale-range>
            </kendo-radialgauge-scale-ranges>
          </kendo-radialgauge-scale>
        </kendo-radialgauge>
    `
})
export class AppComponent {
    public showLabels = true;
    public showTicks = true;
    public reverse = false;

    public startAngle = -30;
    public endAngle = 210;
    public rangeSize: number;

    public rangeLineCap = 'round';

    public rangePlaceholderColor = '#e6e5e5';
    public ticksColor = '#008000';
    public labelsColor = '#0000ff';
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { GaugesModule } from '@progress/kendo-angular-gauges';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [
    BrowserModule,
    GaugesModule,
    FormsModule
  ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { GaugesModule } from '@progress/kendo-angular-gauges';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article