AppearancePremium
The React Gauge component enables you to set its width and height, customize its color, and use CSS custom properties in color configurations.
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.
CSS Custom Properties
Instead of manually resolving CSS variables with getComputedStyle(), you can now pass CSS custom properties directly to gauge color configurations. The Gauges automatically resolve them from the component's DOM context. Existing color specifications using hex codes, RGB values, or named colors continue to work unchanged.
Use any of these formats to reference a custom property:
"--success"— Direct reference"var(--warning)"— CSSvar()function"var(--error, #ff0000)"— CSSvar()function with fallback value
CSS custom properties work with these gauge color settings:
| Component | Property |
|---|---|
| ArcGauge, CircularGauge | color and colors |
| LinearGauge, RadialGauge | pointer.color (single or array) |
The following demos show CSS custom properties across all gauge types.