Scale Options

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

For example, you can change the appearance of the label, line, and ticks, customize the ranges, and others. For the full list of options, refer to the API reference of the LinearGauge.

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-3">
                    <label> <input type="number" [(ngModel)]="lineWidth" min="1" max="30" /> Line Width</label>
                </div>
                <div class="col-sm-12 col-md-3">
                    <label><input type="color" [(ngModel)]="lineColor" /> Line Color</label>
                </div>
                <div class="col-sm-12 col-md-3">
                    <label> <input type="number" [(ngModel)]="rangeSize" min="1" max="30" /> Range Size</label>
                </div>
                <div class="col-sm-12 col-md-3">
                    <label><input type="color" [(ngModel)]="rangeColor" /> Range Color</label>
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="col-sm-12 col-md-3">
                    <label><input type="checkbox" [(ngModel)]="vertical" /> Vertical </label>
                </div>
                <div class="col-sm-12 col-md-3">
                    <label><input type="checkbox" [(ngModel)]="reverse" /> Reverse </label>
                </div>
            </div>
        </div>
        <kendo-lineargauge [pointer]="[{ value: 30 }]" [transitions]="false" style="display:block;">
          <kendo-lineargauge-scale
                [majorTicks]="{ visible: showTicks, color: ticksColor }"
                [minorTicks]="{ visible: showTicks, color: ticksColor }"
                [reverse]="reverse"
                [vertical]="vertical"
                [line]="{ width: lineWidth, color: lineColor }"
                [rangeSize]="rangeSize">
            <kendo-lineargauge-scale-labels format="c" [color]="labelsColor" [visible]="showLabels">
            </kendo-lineargauge-scale-labels>
            <kendo-lineargauge-scale-ranges>
                <kendo-lineargauge-scale-range [from]="0" [to]="30" [color]="rangeColor">
                </kendo-lineargauge-scale-range>
            </kendo-lineargauge-scale-ranges>
          </kendo-lineargauge-scale>
        </kendo-lineargauge>
    `
})
export class AppComponent {
    public showLabels = true;
    public showTicks = true;
    public reverse = false;
    public vertical = true;

    public lineWidth: number;
    public lineColor = '#656565';

    public rangeSize: number;
    public rangeColor = '#ff6358';

    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