Web Components Radial Gauge Overview

The Web Components radial gauge component provides a number of visual elements, like a needle, tick marks, ranges, and labels, in order to create a predefined shape and scale. The IgcRadialGaugeComponent also has built-in support for animated transitions. This animation is easily customizable by setting the transitionDuration property.

Web Components Radial Gauge Example

The following sample demonstrates how setting multiple properties on the same IgcRadialGaugeComponent can transform it to completely different radial gauge.

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { IgcRadialGaugeComponent } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { RadialGaugeNeedleShape } from 'igniteui-webcomponents-gauges';
import { RadialGaugePivotShape } from 'igniteui-webcomponents-gauges';
import { RadialGaugeScaleOversweepShape } from 'igniteui-webcomponents-gauges';
import { SweepDirection } from 'igniteui-webcomponents-core';
import { RadialGaugeBackingShape } from 'igniteui-webcomponents-gauges';
import { IgcRadialGaugeRangeComponent } from 'igniteui-webcomponents-gauges';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeAnimation {

    private gauge: IgcRadialGaugeComponent;
    private shouldAnimate: boolean = false;

    constructor() {

        this.gauge = document.getElementById('gauge') as IgcRadialGaugeComponent;

        let button1 = document.getElementById('button1');
        button1!.addEventListener('click', this.onAnimateToGauge1)

        let button2 = document.getElementById('button2');
        button2!.addEventListener('click', this.onAnimateToGauge2)

        let button3 = document.getElementById('button3');
        button3!.addEventListener('click', this.onAnimateToGauge3)

        let button4 = document.getElementById('button4');
        button4!.addEventListener('click', this.onAnimateToGauge4)

        this.onAnimateToGauge4(this.gauge);
    }

    // full radial gauge
    public onAnimateToGauge4 = (e: any) => {

        if(this.shouldAnimate){
            this.gauge.transitionDuration = 1000;
        }

        this.gauge.minimumValue = 0;
        this.gauge.maximumValue = 50;
        this.gauge.value = 25;
        this.gauge.interval = 5;

        // setting appearance of labels
        this.gauge.labelInterval = 5;
        this.gauge.labelExtent = 0.71;
        this.gauge.font = '15px Verdana,Arial';

        // setting custom needle
        this.gauge.isNeedleDraggingEnabled = true;
        this.gauge.needleEndExtent = 0.5;
        this.gauge.needleShape = RadialGaugeNeedleShape.Triangle;
        this.gauge.needleEndWidthRatio = 0.03;
        this.gauge.needleStartWidthRatio = 0.05;
        this.gauge.needlePivotShape = RadialGaugePivotShape.CircleOverlay;
        this.gauge.needlePivotWidthRatio = 0.15;
        this.gauge.needleBaseFeatureWidthRatio = 0.15;
        this.gauge.needleBrush = '#79797a';
        this.gauge.needleOutline = '#79797a';
        this.gauge.needlePivotBrush = '#79797a';
        this.gauge.needlePivotOutline = '#79797a';

        // setting appearance of major/minor ticks
        this.gauge.minorTickCount = 4;
        this.gauge.minorTickEndExtent = 0.625;
        this.gauge.minorTickStartExtent = 0.6;
        this.gauge.minorTickStrokeThickness = 1;
        this.gauge.minorTickBrush = '#79797a';
        this.gauge.tickStartExtent = 0.6;
        this.gauge.tickEndExtent = 0.65;
        this.gauge.tickStrokeThickness = 2;
        this.gauge.tickBrush = '#79797a';

        // setting extent of gauge scale
        this.gauge.scaleStartAngle = 120;
        this.gauge.scaleEndAngle = 60;
        this.gauge.scaleBrush = '#d6d6d6';
        this.gauge.scaleOversweepShape = RadialGaugeScaleOversweepShape.Fitted;
        this.gauge.scaleSweepDirection = SweepDirection.Clockwise;
        this.gauge.scaleEndExtent = 0.57;
        this.gauge.scaleStartExtent = 0.5;

        // setting appearance of backing dial
        this.gauge.backingBrush = '#fcfcfc';
        this.gauge.backingOutline = '#d6d6d6';
        this.gauge.backingStrokeThickness = 5;
        this.gauge.backingShape = RadialGaugeBackingShape.Circular;

        // setting custom gauge ranges
        const range1 = new IgcRadialGaugeRangeComponent();
        range1.startValue = 5;
        range1.endValue = 15;
        const range2 = new IgcRadialGaugeRangeComponent();
        range2.startValue = 15;
        range2.endValue = 35;
        const range3 = new IgcRadialGaugeRangeComponent();
        range3.startValue = 35;
        range3.endValue = 45;
        this.gauge.rangeBrushes  = [ '#F86232', '#DC3F76', '#7446B9'];
        this.gauge.rangeOutlines = [ '#F86232', '#DC3F76', '#7446B9'];
        this.gauge.ranges.clear();
        this.gauge.ranges.add(range1);
        this.gauge.ranges.add(range2);
        this.gauge.ranges.add(range3);
        // setting extent of all gauge ranges
        for (let i = 0; i < this.gauge.ranges.count; i++) {
            const range = this.gauge.ranges.item(i);
            range.innerStartExtent = 0.5;
            range.innerEndExtent = 0.5;
            range.outerStartExtent = 0.57;
            range.outerEndExtent = 0.57;
        }

        this.shouldAnimate = true;
    }

    // semi radial gauge
    public onAnimateToGauge3 = (e: any) => {

        if(this.shouldAnimate){
            this.gauge.transitionDuration = 1000;
        }

        this.gauge.minimumValue = 0;
        this.gauge.maximumValue = 80;
        this.gauge.value = 10;
        this.gauge.interval = 10;

        // Label Settings
        this.gauge.labelExtent = 0.6;
        this.gauge.labelInterval = 10;
        this.gauge.font = '15px Verdana,Arial';

        // Scale Settings
        this.gauge.scaleStartAngle = 135;
        this.gauge.scaleEndAngle = 45;
        this.gauge.scaleBrush = '#0b8fed';
        this.gauge.scaleOversweepShape = RadialGaugeScaleOversweepShape.Auto;
        this.gauge.scaleSweepDirection = SweepDirection.Clockwise;
        this.gauge.scaleEndExtent = 0.825;
        this.gauge.scaleStartExtent = 0.775;

        this.gauge.minorTickStartExtent = 0.7;
        this.gauge.minorTickEndExtent = 0.75;
        this.gauge.tickStartExtent = 0.675;
        this.gauge.tickEndExtent = 0.75;

        // Backing Settings
        this.gauge.backingShape = RadialGaugeBackingShape.Fitted;
        this.gauge.backingBrush = '#fcfcfc';
        this.gauge.backingOutline = '#d6d6d6';
        this.gauge.backingOversweep = 5;
        this.gauge.backingCornerRadius = 10;
        this.gauge.backingOuterExtent = 0.9;

        // Needle Settings
        this.gauge.needleShape = RadialGaugeNeedleShape.NeedleWithBulb;
        this.gauge.needlePivotShape = RadialGaugePivotShape.CircleOverlay;
        this.gauge.needleEndExtent = 0.5;
        this.gauge.needlePointFeatureExtent = 0.3;
        this.gauge.needlePivotWidthRatio = 0.2;
        this.gauge.needleBrush = '#9f9fa0';
        this.gauge.needleOutline = '#9f9fa0';
        this.gauge.needlePivotBrush = '#9f9fa0';
        this.gauge.needlePivotOutline = '#9f9fa0';

        // TickMark Settings
        this.gauge.tickBrush = 'rgba(51, 51, 51, 1)';
        this.gauge.minorTickBrush = 'rgba(73, 73, 73, 1)';
        this.gauge.minorTickCount = 6;

        this.gauge.ranges.clear();
        this.shouldAnimate = true;
    }

    // half radial gauge
    public onAnimateToGauge2 = (e: any) => {

        if(this.shouldAnimate){
            this.gauge.transitionDuration = 1000;
        }

        this.gauge.minimumValue = 100;
        this.gauge.maximumValue = 200;
        this.gauge.value = 125;

        // Scale Settings
        this.gauge.scaleStartAngle = 180;
        this.gauge.scaleEndAngle = 0;
        this.gauge.scaleBrush = 'transparent';
        this.gauge.scaleSweepDirection = SweepDirection.Clockwise;

        // Backing Settings
        this.gauge.backingOutline = 'white';
        this.gauge.backingBrush = 'white';
        this.gauge.backingShape = RadialGaugeBackingShape.Fitted;

        // Needle Settings
        this.gauge.needleEndExtent = 0.8;
        this.gauge.needleShape = RadialGaugeNeedleShape.Triangle;
        this.gauge.needlePivotShape = RadialGaugePivotShape.Circle;
        this.gauge.needlePivotWidthRatio = 0.1;
        this.gauge.needleBrush = '#79797a';
        this.gauge.needleOutline = '#79797a';

        // TickMark Settings
        this.gauge.tickBrush = 'transparent';
        this.gauge.minorTickBrush = 'transparent';

        // Label Settings
        this.gauge.labelInterval = 50;
        this.gauge.labelExtent = 0.935;
        this.gauge.font = '13px Verdana,Arial';

        // setting custom gauge ranges
        const range1 = new IgcRadialGaugeRangeComponent();
        range1.startValue = 100;
        range1.endValue = 150;
        const range2 = new IgcRadialGaugeRangeComponent();
        range2.startValue = 150;
        range2.endValue = 200;

        this.gauge.rangeBrushes  = [ '#32f845', '#bf32f8' ];
        this.gauge.rangeOutlines = [ '#32f845', '#bf32f8' ];
        this.gauge.ranges.clear();
        this.gauge.ranges.add(range1);
        this.gauge.ranges.add(range2);

        // setting extent of all gauge ranges
        for (let i = 0; i < this.gauge.ranges.count; i++) {
            const range = this.gauge.ranges.item(i);
            range.innerStartExtent = 0.3;
            range.innerEndExtent = 0.3;
            range.outerStartExtent = 0.9;
            range.outerEndExtent = 0.9;
        }

        this.shouldAnimate = true;
    }

    // quatre radial gauge
    public onAnimateToGauge1 = (e: any) => {

        if(this.shouldAnimate){
            this.gauge.transitionDuration = 1000;
        }

        this.gauge.minimumValue = 0;
        this.gauge.maximumValue = 10;
        this.gauge.value = 7.5;

        // Scale Settings
        this.gauge.scaleStartAngle = 180;
        this.gauge.scaleEndAngle = 270;
        this.gauge.scaleBrush = 'transparent';
        this.gauge.scaleSweepDirection = SweepDirection.Clockwise;

        // Backing Settings
        this.gauge.backingOutline = 'white';
        this.gauge.backingBrush = 'white';
        this.gauge.backingShape = RadialGaugeBackingShape.Fitted;

        // Needle Settings
        this.gauge.needleEndExtent = 0.8;
        this.gauge.needleShape = RadialGaugeNeedleShape.Triangle;
        this.gauge.needlePivotShape = RadialGaugePivotShape.Circle;
        this.gauge.needlePivotWidthRatio = 0.1;
        this.gauge.needleBrush = '#79797a';
        this.gauge.needleOutline = '#79797a';

        // TickMark Settings
        this.gauge.tickBrush = 'transparent';
        this.gauge.minorTickBrush = 'transparent';

        // Label Settings
        this.gauge.labelInterval = 5;
        this.gauge.labelExtent = 0.915;
        this.gauge.font = '15px Verdana,Arial';

        // setting custom gauge ranges
        const range1 = new IgcRadialGaugeRangeComponent();
        range1.startValue = 0;
        range1.endValue = 5;
        const range2 = new IgcRadialGaugeRangeComponent();
        range2.startValue = 5;
        range2.endValue = 10;

        this.gauge.rangeBrushes  = [ '#a4bd29', '#F86232' ];
        this.gauge.rangeOutlines = [ '#a4bd29', '#F86232' ];
        this.gauge.ranges.clear();
        this.gauge.ranges.add(range1);
        this.gauge.ranges.add(range2);

        // setting extent of all gauge ranges
        for (let i = 0; i < this.gauge.ranges.count; i++) {
            const range = this.gauge.ranges.item(i);
            range.innerStartExtent = 0.3;
            range.innerEndExtent = 0.3;
            range.outerStartExtent = 0.9;
            range.outerEndExtent = 0.9;
        }

        this.shouldAnimate = true;
    }
}

new RadialGaugeAnimation();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeAnimation</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class ="container sample center">
    <div class="options horizontal">
        <button id="button1" class="options-button">Gauge Animation #1</button>
        <button id="button2" class="options-button">Gauge Animation #2</button>
        <button id="button3" class="options-button">Gauge Animation #3</button>
        <button id="button4" class="options-button">Gauge Animation #4</button>
    </div>

    <igc-radial-gauge
        id="gauge"        
        height="calc(100% - 3.5rem)"
        width="100%"
        value="25"
        interval="5"
        minimum-value="0"
        maximum-value="50"
        label-interval="5"
        label-extent="0.71"
        minor-tickCount="4"
        minor-tick-end-extent=".625"
        minor-tick-start-extent=".6"
        minor-tick-stroke-thickness="1"
        minor-tick-brush = "#79797a"
        tick-start-extent=".6"
        tick-end-extent=".65"
        tick-stroke-thickness="2"
        tick-brush="#79797a"
        needle-shape="Triangle"
        needle-end-width-ratio="0.03"
        needle-start-width-ratio="0.05"
        needle-pivot-shape="CircleOverlay"
        needle-pivot-width-ratio="0.15"
        needle-base-feature-width-ratio="0.15"
        needle-brush="#79797a"
        needle-outline="#79797a"
        needle-pivot-brush="#79797a"
        needle-pivot-outline="#79797a"
        is-needle-dragging-enabled="true"
        backing-brush="#fcfcfc"
        backing-outline="#d6d6d6"
        backing-stroke-thickness="5"
        scale-start-angle="120"
        scale-end-angle="60"
        scale-brush="#d6d6d6"
        range-brushes="#F86232, #DC3F76, #7446B9"
        range-outlines="#F86232, #DC3F76, #7446B9" >
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Dependencies

When installing the gauge component, the core package must also be installed.

npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-gauges
cmd

Component Modules

The IgcRadialGaugeComponent requires the following modules:

// Module Manager for registering the modules of the chart
import { ModuleManager } from 'igniteui-webcomponents-core';
// Radial Gauge Module
import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';

// register the modules
ModuleManager.register(
    IgcRadialGaugeModule
);
ts

Usage

The following code demonstrates how create a radial gauge containing a needle and three comparative ranges on the scale.

  <igc-radial-gauge
    height="400px"
    width="400px"
    value="25"
    interval="5"
    minimum-value="0"
    maximum-value="100">
    <igc-radial-gauge-range
      start-value="0"
      end-value="30"
      brush="red">
    </igc-radial-gauge-range>
    <igc-radial-gauge-range
      start-value="30"
      end-value="60"
      brush="yellow">
    </igc-radial-gauge-range>
    <igc-radial-gauge-range
      start-value="60"
      end-value="100"
      brush="green">
    </igc-radial-gauge-range>
  </igc-radial-gauge>
html

Backing

The radial gauge component comes with a backing shape drawn behind the scale that acts as a background for the radial gauge.

The backing element represents background and border of the radial gauge component. It is always the first element rendered and all the rest of elements such as needle, labels, and tick marks are overlay on top of it.

The backing can be circular or fitted. A circular shape creates a 360 degree circle gauge while a fitted shape creates a filled arc segment encompassing the scaleStartAngle and scaleEndAngle properties. This can be set by setting the backingShape property.

  <igc-radial-gauge
    height="300px" width="300px"
    backing-shape="Fitted"
    backing-brush="#fcfcfc"
    backing-outline="DodgerBlue"
    backing-oversweep="5"
    backing-corner-radius="10"
    backing-stroke-thickness="5"
    backing-outer-extent="0.8"
    backing-inner-extent="0.15"
    scale-start-angle="135" scale-end-angle="45"
    minimum-value="0" value="50"
    maximum-value="80" interval="10">
  </igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeBacking {

    constructor() {
    }

}

new RadialGaugeBacking();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeBacking</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        backing-shape="Fitted"
        backing-brush="#fcfcfc"
        backing-outline="DodgerBlue"
        backing-oversweep="5"
        backing-corner-radius="10"
        backing-stroke-thickness="5"
        backing-outer-extent="0.8"
        backing-inner-extent="0.15"

        scale-start-angle="135"
        scale-end-angle="45"
        scale-brush="#dddddd"

        height="100%"
        width="100%"
        minimum-value="0" value="50"
        maximum-value="80" interval="10" />

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Scale

The scale is visual element that highlights full range of values in the gauge which can be created by supplying minimumValue and maximumValue values. Together with backing, it defines overall shape of gauge. The scaleStartAngle and scaleEndAngle properties define bounds of arc of the scale. While, the scaleSweepDirection property specifies whether the scale sweeps in clockwise or counter-clockwise direction. You can customize appearance of the scale by setting scaleBrush, scaleStartExtent, and scaleEndExtent properties.

  <igc-radial-gauge
    height="300px" width="300px"
    scale-start-angle="135"
    scale-end-angle="45"
    scale-brush="DodgerBlue"
    scale-sweep-direction="Clockwise"
    scale-oversweep="1"
    scale-oversweep-shape="Fitted"
    scale-start-extent="0.45"
    scale-end-extent="0.575"
    minimum-value="0" value="50"
    maximum-value="80" interval="10">
  </igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeScale {

    constructor() {
    }

}

new RadialGaugeScale();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeScale</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        scale-start-angle="135"
        scale-end-angle="45"
        scale-brush="DodgerBlue"
        scale-sweep-direction="Clockwise"
        scale-oversweep="1"
        scale-oversweep-shape="Fitted"
        scale-start-extent="0.45"
        scale-end-extent="0.575"
        height="100%"
        width="100%"
        minimum-value="0" value="50"
        maximum-value="80" interval="10" >
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Labels and Titles

The radial gauge labels are visual elements displaying numeric values at a specified interval between values of the minimumValue and maximumValue properties. You can position labels by setting the labelExtent property to a fraction, where 0 represents center of gauge and 1 represents outer extent of the gauge backing. Also, you can customize labels setting various styling properties such as fontBrush and font.

Each of these labels for the needle have various styling attributes you can apply to change the font, angle, brush and distance from the center of the gauge such as titleExtent, titleAngle, SubtitleFontSize, highlightLabelBrush.

  <igc-radial-gauge
    height="300px" width="300px"
    label-extent="0.65"
    label-interval="10"
    font="11px Verdana"
    font-brush="DodgerBlue"
    minimum-value="0" value="50"
    maximum-value="100" interval="10">
  </igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { IgcRadialGaugeComponent } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeLabels {

    private gauge: IgcRadialGaugeComponent;

    constructor() {

        this.gauge = document.getElementById('gauge') as IgcRadialGaugeComponent;
        this.gauge.font = '22px Verdana'
    }

}

new RadialGaugeLabels();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeLabels</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        id="gauge"
        font-brush="DodgerBlue"
        font="20px Verdana"
        label-interval="10"
        label-extent="0.65"
        labels-pre-terminal="0"
        labels-post-initial="0"
        title-displays-value=true
        subtitle-text="MPH"
        height="100%"
        width="100%"
        minimum-value="0" value="50"
        maximum-value="80" interval="10" >
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Title & Subtitle

titleText and subtitleText properties are available and can both be used to display custom text for the needle. Alternatively, titleDisplaysValue and subtitleDisplaysValue, when set to true, will let display the needle's value and override titleText and subtitleText. So you can occupy custom text for the title but show the value via the subtitle and vice versa.

If the highlight needle is shown, as explained below, then custom text can be shown via highlightLabelText, otherwise highlightLabelDisplaysValue can be enabled and display it's value.

<igc-radial-gauge
  title-text="Global Sales"
  subtitle-text="2024">
</igc-radial-gauge>
html

Optical Scaling

The radial gauge's labels and titles can change it's scaling. To enable this, first set opticalScalingEnabled to true. Then you can set opticalScalingSize which manages the size at which labels have 100% optical scaling. Labels will have larger fonts when gauge's size is larger. For example, labels will have a 200% larger font size when this property is set to 500 and the gauge px size is doubled to eg. 1000.

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { IgcRadialGaugeComponent } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeOpticalScaling {

    private gauge: IgcRadialGaugeComponent;

    constructor() {
        this.onGaugeSizeChanged = this.onGaugeSizeChanged.bind(this);

        this.gauge = document.getElementById('gauge') as IgcRadialGaugeComponent;

        let checkbox1 = document.getElementById('checkbox1');
        checkbox1!.addEventListener('change', this.onOpticalScalingChanged);

        let slider1 = document.getElementById('slider') as HTMLInputElement;
        slider1!.addEventListener('change', this.onGaugeSizeChanged);
    }

    public onOpticalScalingChanged = (e: any) => {
        const isEnabled = e.target.checked;
        this.gauge.opticalScalingEnabled = isEnabled;

        if (isEnabled) {
            this.gauge.opticalScalingEnabled = true;
        }
        else {
            this.gauge.opticalScalingEnabled = false;
        }
    }

    public onGaugeSizeChanged = (e: any) => {

        let num: number = parseInt(e.target.value);
        this.gauge.width = num.toString() + "%";
        this.gauge.height = num.toString() + "%";
    }
}

new RadialGaugeOpticalScaling();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeOpticalScaling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
  <div class="options horizontal">
    <label class="options-label">Optical Scaling: </label>
    <label class="options-label"><input type="checkbox" id="checkbox1" checked="true"></input> Resize Gauge: </label>
    <input class="options-slider" id="slider" type="range" min="20" max="100" step="10" value="100"></input>

</div>

    <igc-radial-gauge
        id="gauge"
        height="100%"
        width="100%"
        title-displays-value="true"
        subtitle-text="MPH"       
        minimum-value="0" value="50"
        maximum-value="80" interval="10"
        title-extent="0.5"
        subtitle-extent="0.65"
        optical-scaling-enabled="true" 
        optical-scaling-size="500">
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Tick Marks

Tick marks are thin lines radiating from the center of the radial gauge. There are two types of tick marks: major and minor. Major tick marks are displayed at the interval between the minimumValue and maximumValue properties. Use the minorTickCount property to specify the number of minor tick marks displayed between each major tick mark. You can control the length of tick marks by setting a fraction (between 0 and 1) to tickStartExtent, tickEndExtent, minorTickStartExtent, and minorTickEndExtent properties.

  <igc-radial-gauge
    height="300px" width="300px"
    tick-start-extent="0.45"
    tick-end-extent="0.575"
    tick-stroke-thickness="2"
    tick-brush="DodgerBlue"
    minor-tick-count="4"
    minor-tick-end-extent="0.5"
    minor-tick-start-extent="0.575"
    minor-tick-stroke-thickness="1"
    minor-tick-brush="DarkViolet"
    minimum-value="0" value="50"
    maximum-value="80" interval="10">
  </igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeTickmarks {

    constructor() {
    }

}

new RadialGaugeTickmarks();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeTickmarks</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        id="gauge"
        height="100%"
        width="100%"
        minimum-vue="0" value="50"
        maximum-value="80" interval="10"
        tick-start-extent="0.5"
        tick-end-extent="0.57"
        tick-stroke-thickness="2"
        tick-brush="DodgerBlue"
        minor-tick-count="4"
        minor-tick-end-extent="0.520"
        minor-tick-start-extent="0.57"
        minor-tick-stroke-thickness="1"
        minor-tick-brush="DarkViolet" >
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Ranges

A range highlights a set of continuous values bound by a specified minimumValue and maximumValue properties. You can add multiple ranges to the radial gauge by specifying their starting and ending values. Each range has a few customization properties such as brush and outline. Alternatively, you can set rangeBrushes and rangeOutlines properties to a list of colors for the ranges.

  <igc-radial-gauge
    height="300px" width="300px"
    minimum-value="0" value="50"
    maximum-value="80" interval="10"
    range-brushes ="red, yellow, green"
    range-outlines="red, yellow, green">
    <igc-radial-gauge-range
        start-value="5"  end-value="15" brush="red">
    </igc-radial-gauge-range>
    <igc-radial-gauge-range
      start-value="15"  end-value="35" brush="yellow">
    </igc-radial-gauge-range>
    <igc-radial-gauge-range
      start-value="35"  end-value="45" brush="green">
    </igc-radial-gauge-range>
  </igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeRanges {

    constructor() {
    }

}

new RadialGaugeRanges();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeRanges</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        height="100%"
        width="100%"
        minimum-value="0" value="50"
        maximum-value="80" interval="10"
        range-brushes ="#a4bd29, #F86232"
        range-outlines="#a4bd29, #F86232"  >
        <igc-radial-gauge-range name="range1"
            start-value="10" end-value="25"
            inner-start-extent="0.50" inner-end-extent="0.50"
            outer-start-extent="0.57" outer-end-extent="0.57" >
        </igc-radial-gauge-range>
        <igc-radial-gauge-range name="range2"
            start-value="25" end-value="40"
            inner-start-extent="0.50" inner-end-extent="0.50"
            outer-start-extent="0.57" outer-end-extent="0.57" >
        </igc-radial-gauge-range>
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Needle

Radial gauge needles are visual elements used to signify a gauge set value. Needles are available in one of the several predefined shapes. The needle can have a pivot shape, which is placed in the center of the gauge. The pivot shape also takes one of the predefined shapes. Pivot shapes that include an overlay or an underlay can have a separate pivot brush applied to the shape.

The supported needle shapes and caps are set using the needleShape and needlePivotShape properties.

You can enable an interactive mode of the gauge (using isNeedleDraggingEnabled property) and the end-user will be able to change value by dragging the needle between values of minimumValue and maximumValue properties.

  <igc-radial-gauge
    height="300px" width="300px"
    is-needle-dragging-enabled="true"
    is-needle-dragging-constrained="true"
    needle-shape="NeedleWithBulb"
    needle-brush="DodgerBlue"
    needle-outline="DodgerBlue"
    needle-end-extent="0.475"
    needle-stroke-thickness="1"
    needle-pivot-shape="CircleOverlay"
    needle-pivot-brush="#9f9fa0"
    needle-pivot-outline="#9f9fa0"
    needle-pivot-width-ratio="0.2"
    needle-pivot-stroke-thickness="1"
    minimum-value="0" value="50"
    maximum-value="80" interval="10">
  </igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeNeedle {

    constructor() {
    }

}

new RadialGaugeNeedle();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeNeedle</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        height="100%"
        width="100%"
        is-needle-dragging-enabled="true"
        is-needle-dragging-constrained="true"
        needle-shape="NeedleWithBulb"
        needle-brush="DodgerBlue"
        needle-outline="DodgerBlue"
        needle-end-extent="0.475"
        needle-stroke-thickness="1"
        needle-pivot-shape="CircleOverlay"
        needle-pivot-brush="#9f9fa0"
        needle-pivot-outline="#9f9fa0"
        needle-pivot-width-ratio="0.2"
        needle-pivot-stroke-thickness="1"
        value="50"
        minimum-value="0"
        maximum=value="80"
        interval="10" >
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Highlight Needle

The radial gauge can be modified to show a second needle. This will make the main needle's value appear with a lower opacity. To enable this first set highlightValueDisplayMode to Overlay and then apply a highlightValue.

<igc-radial-gauge
    id="gauge"
    highlight-value="50"
    highlight-value-display-mode="Overlay"
    highlight-label-displays-value="true"
    highlight-label-snaps-to-needle-pivot="true"
    is-highlight-needle-dragging-enabled="true"
    label-interval="10"
    label-extent="0.65"        
    height="100%"
    width="100%"
    minimum-value="0" value="30"
    maximum-value="100" interval="10">
</igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { IgcRadialGaugeComponent } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeHighlightNeedle {

    private gauge: IgcRadialGaugeComponent;

    constructor() {

        this.gauge = document.getElementById('gauge') as IgcRadialGaugeComponent;
        this.gauge.font = '22px Verdana'
    }

}

new RadialGaugeHighlightNeedle();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeHighlightNeedle</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        id="gauge"
        highlight-value="50"
        highlight-value-display-mode="Overlay"
        highlight-label-displays-value="true"
        highlight-label-snaps-to-needle-pivot="true"
        is-highlight-needle-dragging-enabled="true"
        label-interval="10"
        label-extent="0.65"        
        height="100%"
        width="100%"
        minimum-value="0" value="30"
        maximum-value="100" interval="10" >
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Summary

For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the radial gauge with all features and visuals enabled.

  <igc-radial-gauge
    height="300px" width="300px"
    minimum-value="0"
    maximum-value="80"
    scale-start-angle="135"
    scale-end-angle="45"
    scale-brush="#c6c6c6"
    scale-sweep-direction="Clockwise"
    scale-oversweep="1"
    scale-oversweep-shape="Fitted"
    scale-start-extent="0.45"
    scale-end-extent="0.575"

    value="70"
    is-needle-dragging-enabled="true"
    is-needle-dragging-constrained="true"
    needle-shape="NeedleWithBulb"
    needle-brush="DodgerBlue"
    needle-outline="DodgerBlue"
    needle-end-extent="0.475"
    needle-stroke-thickness="1"
    needle-pivot-shape="CircleOverlay"
    needle-pivot-brush="#9f9fa0"
    needle-pivot-outline="#9f9fa0"
    needle-pivot-width-ratio="0.2"
    needle-pivot-stroke-thickness="1"

    interval="10"
    tick-start-extent="0.45"
    tick-end-extent="0.575"
    tick-stroke-thickness="2"
    tick-brush="Black"
    minor-tick-count="4"
    minor-tick-end-extent="0.5"
    minor-tick-start-extent="0.575"
    minor-tick-stroke-thickness="1"
    minor-tick-brush="Black"

    label-extent="0.65"
    label-interval="10"
    font="11px Verdana"
    font-brush="Black"

    backing-shape="Fitted"
    backing-brush="#ededed"
    backing-outline="Gray"
    backing-oversweep="5"
    backing-corner-radius="10"
    backing-stroke-thickness="5"
    backing-outer-extent="0.8"
    backing-inner-extent="0.15"

    range-brushes ="#a4bd29, #F86232"
    range-outlines="#a4bd29, #F86232">
    <igc-radial-gauge-range
      start-value="20" end-value="40"
      inner-start-extent="0.45" inner-end-extent="0.45"
      outer-start-extent="0.57" outer-end-extent="0.57">
    </igc-radial-gauge-range>
    <igc-radial-gauge-range
      start-value="40" end-value="60"
      inner-start-extent="0.45" inner-end-extent="0.45"
      outer-start-extent="0.57" outer-end-extent="0.57">
    </igc-radial-gauge-range>
  </igc-radial-gauge>
html

API References

The following is a list of API members mentioned in the above sections:

• IgcRadialGaugeComponent
• IgcRadialGaugeRangeComponent

Additional Resources

You can find more information about other types of gauges in these topics:

• Bullet Graph
• Linear Gauge