Appearance

Premium

Updated on Dec 19, 2025

The React Gauge component enables you to set its width and height and customize its 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 KendoReact theme. It is possible to customize them through the theme variables and the configuration.

Suggested Links

• API Reference of the Gauges
• Creating Custom Styles with ThemeBuilder