New to Kendo UI for Angular? Start a free 30-day trial


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 attributefor 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.

View Source
Change Theme:

The components automatically resize and redraw their content when the size of their elements changesfor 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.


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

Not finding the help you need?