Appearance

The Gauges enable you to set their width and height and customize their color.

Dimensions and Resizing

By default, the Gauges are rendered with a size of 200x200 px. To set a different size to the ArcGauge, use the style attribute—for example, style="width: 100%; height: 100%;" accommodates the component in the container element.

The LinearGauge and RadialGauge are inline elements by default. In addition to specifying their width and height inline with the style attribute, configure their display as block elements by applying the display: block; CSS rule to the .k-gauge class.

<div class="row">
     <div class="col-sm-12 col-md-2">
         <kendo-lineargauge #linear [pointer]="{ value: value }" style="width: 300px; height: 300px;">
         </kendo-lineargauge>
     </div>
     <div class="col-sm-12 col-md-5">
         <kendo-radialgauge #radial [pointer]="{ value: value }" style="width: 300px; height: 300px;">
         </kendo-radialgauge>
     </div>
  </div>
  `,
  styles: [`
     .k-gauge {
         display: block;
     }
  `

The components automatically resize and redraw their content when the size of their elements changes—for example, as a result of a browser window resizing. To limit the automatic resizing, use the resizeRateLimit option of the Gauges. To disable the automatic resizing, set resizeRateLimit to 0.

Color

The colors of the Gauges are derived from the active Kendo UI theme. It is possible to customize them through the theme variables and the configuration.

In this article