New to Kendo UI for Angular? Start a free 30-day trial
CircularGaugeAreaComponent
Updated on Nov 4, 2025
Represents the configuration options of the Circular Gauge area. Sets up the entire visible area of the CircularGauge.
typescript
@Component({
  selector: 'my-app',
  template: `
    <kendo-circulargauge>
      <kendo-circulargauge-area background="lightblue" margin="10">
      </kendo-circulargauge-area>
    </kendo-circulargauge>
  `
})
export class AppComponent { }
Selector
kendo-circulargauge-area
Inputs
| Name | Type | Default | Description | 
|---|---|---|---|
background? | 
 | 
 The background of the Gauge area. Accepts valid CSS color strings, including hex and rgb.  | |
border? | 
 | 
 The border of the Gauge area.  | |
height? | 
 | 
 The height of the Gauge area.  | |
margin? | 
 | 
 The margin of the Gauge area.  | |
width? | 
 | 
 The width of the Gauge area.  |