# Appearance

The Gauges enable you to [set their width and height](https://www.telerik.com/kendo-vue-ui-develop/components/gauges/styling#dimensions-and-resizing) and [customize their color](https://www.telerik.com/kendo-vue-ui-develop/components/gauges/styling#color).

## Dimensions and Resizing

By default, the ArcGauge is rendered in a 200x200 px size while the LinearGauge and RadialGauge expand to the full width of the container element. To set a different size, use the `style` attribute—for example, `style="width: 100%; height: 100%;"` accommodates the component in the container element.

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.

## Color

The colors of the Gauges are derived from the active [Kendo UI for Vue theme](https://www.telerik.com/design-system/docs/themes/kendo-themes/meridian/customization/). It is possible to customize them through the [theme variables](https://www.telerik.com/design-system/docs/themes/kendo-themes/meridian/theme-variables/) and the configuration.

## Suggested Links

* [API Reference of the Gauges](https://www.telerik.com/kendo-vue-ui-develop/components/gauges/api)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-vue-ui-develop/components/styling/theme-builder)